DDR爱好者之家

解决Js先触发失去焦点事件再执行点击事件的问题
站长资源 2024/4/20 佚名
33 1538
DDR爱好者之家 Design By 杰米

最近在做公司的某个从项目，基本设计和淘宝登陆页类似：

1）文本框内容为空是，文本框右侧无清除按钮，当有内容时立即显示清除按钮；

2）当文本框失去焦点时，清除按钮消失，获取焦点时若文本框内有内容，则显示清除按钮，否则不显示；

3）文本框再有内容且获取焦点的情况下，点击清除按钮，文本框内容置空，且清除按钮消失。

随后想了想，感觉是个很简单的需求，只要结合使用keyup和blur以及click时间就可以解决了，然而，结果却不是我想要的，代码如下：

html代码：

<div class="input-group">
 <input type="text" id="mobile" class="form-control" placeholder="请输入手机号" autocomplete="off" />
 <div class="input-group-addon icon-clear"></div>
</div>

js代码：

//绑定监听手机号文本框内容按钮事件
$('#mobile').keyup(function() {
 var clearBtn = $(this).parent().find('.icon-clear');
 if($(this).val() == '') { clearBtn.hide(); } 
 else { clearBtn.css('display', 'table-cell'); }
});
//手机号输入框失去焦点，去除清除按钮;获取焦点时，若有值则显示清除按钮
$('#mobile').blur(function() {
 $('#mobile').parent().find('.icon-clear').hide();
}).focus(function(){
 if($(this).val() != ''){
  $(this).parent().find('.icon-clear').css('display', 'table-cell');
 }
});
//清除文本框内容事件
$('.icon-clear').click(function() {
 $(this).parent().find('input').val('');
 $(this).hide();
});

这样看着像是什么问题都没有的样子，其实不然，运行之后发现，在文本框中输入内容后文本框获取焦点，这个时候我想要去点击清除按钮来清除刚才我写的东西，发现，文本框内容没有置空，清除按钮却先消失了，很纳闷啊。

后来经查阅发现，是先执行的失去焦点事件，那么如何去解决呢？

而后，我在失去焦点事件中对其中的方法进行了延迟处理，如下所示：

//验证码输入框失去焦点，去除清除按钮;获取焦点时，若有值则显示清除按钮
$('#auth_code').blur(function() {
 setTimeout(function() { //进行延时处理，时间单位为千分之一秒
  $('#auth_code').parent().find('.icon-clear').hide();
 }, 100)
}).focus(function(){
 if($(this).val() != ''){
  $(this).parent().find('.icon-clear').css('display', 'table-cell');
 }
});

如此操作后就可以完美解决了，目前未发现任何副作用。

以上这篇解决Js先触发失去焦点事件再执行点击事件的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米