为超链接加上disabled后的故事

场情：
　　一张页面中原来有一个超链接按钮，点击后可以获取到短信认证码。如


代码如下:

<a href="javascript:reciverSms()">获取短信认证码</a>
<script type="text/javascript">
function reciverSms(){
var sms = getSmsCode();
}
</script>

但是考虑到频繁点击获取认证码，对相关设备的压力，就做了一个点击5秒后才允许再点击的逻辑，于是又来了下一个版本


代码如下:

function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}

代码逻辑很简单，获取一次短信后，链接禁用5秒。可是没有想的事情又来了，原来超链接禁用了后虽然样子变成禁用了，但是还是可以点击的，原来是个陷阱，于是又来了第三个版本


代码如下:

function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}

至此这个功能因该是算做好了，可是还有一件令我想不的事，之前说超连接disabled属性为true时，表现出来的样子是灰色不可用状态，但这里有个特例，如果这个超链接被设置了

color的css属性样式，在非ie浏览器上表现出来的样子就不是禁用了，终于看到ie的好了。于是第四个版本出现了。


代码如下:

function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
addClass(obj,"gray");
windows.setTimeout(function(){
obj.disabled = false;
removeClass(obj,"gray");
},5000);
}

通过一步步的改进，一个芝麻功能终于完成了。例子虽小，但却给了我很多思考。

赞 (0)

相关推荐

  • jquery 将disabled的元素置为enabled的三种方法

    这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled. 第一种:改变disabled的boolean状态,具体代码及解释如下: 复制代码 代码如下: $("button:eq(2)").click(function(){ var text2=$("input:text:eq(2)"); if(text2.attr("disabled")==false){ //通过设置disabled的boolean属性将第三个text

  • JQuery设置和去除disabled属性的5种方法总结

    复制代码 代码如下: //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled","disabled"); //三种方法移除disabled属性 $('#areaSelect').attr("disabled",false); $('#areaSelect').removeAttr("disab

  • 为超链接加上disabled后的故事

    场情: 一张页面中原来有一个超链接按钮,点击后可以获取到短信认证码.如 复制代码 代码如下: <a href="javascript:reciverSms()">获取短信认证码</a> <script type="text/javascript"> function reciverSms(){ var sms = getSmsCode(); } </script> 但是考虑到频繁点击获取认证码,对相关设备的压力,就做了

  • 超链接的禁用属性Disabled使用示例

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击 例如: <a herf='http://www.baidu.com' onclick='return click(this);' disabled='ture'>bai du</a> 上面的意思是不想让bai du的超链生效,但在click不做任何约束和判断的话,但点击bai du的时候自然就会跳转到百度页面,这就是html中超链接禁用属性的bug 可以添加下面js约束来判断超链接是否可以使用

  • 表单中Readonly和Disabled的区别详解

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(

  • javascript中input中readonly和disabled区别介绍

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等.但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而 readonly会将该值传递出去(

  • Java计算一个数加上100是完全平方数，加上168还是完全平方数

    题目:一个整数,它加上100后是一个完全平方数,加上168又是一个完全平方数,请问该数是多少? 程序分析:在10万以内判断,先将该数加上100后再开方,再将该数加上268后再开方,如果开方后的结果满足如下条件,即是结果.请看具体分析: 程序设计: public class test { public static void main (String[]args){ long k=0; for(k=1;k<=100000l;k++) if(Math.floor(Math.sqrt(k+100))=

  • 使用jQuery设置disabled属性与移除disabled属性

    表单中readOnly和disabled的区别: Readonly只针对input(text/ password)和textarea有效,而disabled对于所有的表单元素都有效,包括select,radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是

  • 一个不错的优化系统的批处理

    复制代码 代码如下: ~~~~~~~~~~~~~~~~~~~~无敌分割线~~~~~~~~~~~~~~~~~~~~~~~~ @echo off  title Windows Xp超级优化工具 VER 2.5 由VCTU鼎力制作!  MODE con: COLS=70 LINES=35  :begin  MODE con: COLS=70 LINES=35  cls  color 0a  echo.  echo Xp超级优化工具 VER 2.5  echo.  echo VCTU/julian.邪鬼

  • 浅谈mysql密码遗忘和登陆报错的问题

    mysql登录密码忘记,其实解决办法很简单,只需要在mysql的主配置文件my.cnf里添加一行"跳过授权表"的参数选择即可! 在my.cnf中添加下面一行: [root@test-huanqiu ~]# vim /etc/my.cnf              //在[mysqld]区域里添加 ........ skip-grant-tables                       //跳过授权表 然后重启mysql服务,即可无密码登录 [root@test-huanqiu

  • javascript常见操作汇总

    本文整理汇总了javascript常见的各类操作,包括字符串.时间.表单.正则验证等等.有着极高的参考价值.分享给大家供大家参考之用.具体方法如下: /***** BasePage.js 公共的 脚本文件 部分方法需引用jquery库 *****/ //#region 日期操作 //字符串转化为时间. function stringtoTime(date1) { var dt = new Date(Date.parse(date1.replace(/-/g, "/"))); retur

  • MySQL下常见的启动失败与备份失败问题的解决教程

    启动失败 重启服务器后-->重启应用服务(Confluence)-->报错,数据库连接失败(mysql设置了开机自启动)-->查看mysql数据库状态: [root@fisheye ~]# ps -ef | grep mysql root 25555 21974 0 11:28 pts/0 00:00:00 grep mysql 启动mysql服务器 [root@fisheye data]# service mysql start MySQL server PID file could

随机推荐