解决Js先触发失去焦点事件再执行点击事件的问题


Posted in Javascript onAugust 30, 2018

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

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先触发失去焦点事件再执行点击事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断样式className同时增加class或删除class
Jan 30 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 #Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
You might like
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python实现电子词典
2020/04/23 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python 检查文件mime类型的方法
2018/12/08 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
学习党课思想汇报
2013/12/29 职场文书
书法大赛策划方案
2014/06/04 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
门球健将观后感
2015/06/16 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
《司马光》教学反思
2016/02/22 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript