如何解决Js先触发失去焦点事件再执行点击事件的问题-创新互联

这篇文章主要介绍了如何解决Js先触发失去焦点事件再执行点击事件的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司专注于企业成都全网营销、网站重做改版、邵阳网站定制设计、自适应品牌网站建设、成都h5网站建设商城网站定制开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为邵阳等各大城市提供网站开发制作服务。

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

1)文本框内容为空是,文本框右侧无清除按钮,当有内容时立即显示清除按钮;

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

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

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

html代码:


 
 

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先触发失去焦点事件再执行点击事件的问题”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


标题名称:如何解决Js先触发失去焦点事件再执行点击事件的问题-创新互联
文章来源:http://pwwzsj.com/article/ccshgc.html

其他资讯