解决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 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
js读取本地文件的实例
Dec 22 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue里使用create, mounted调用方法
Apr 26 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
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
为数据添加append,remove功能
2006/10/03 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
详解Python中的Cookie模块使用
2015/07/06 Python
Python list操作用法总结
2015/11/10 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python中的for循环
2018/09/28 Python
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
先进工作者获奖感言
2014/02/08 职场文书
电教室标语
2014/06/20 职场文书
工作作风承诺书
2014/08/30 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
八年级英语教学计划
2015/01/23 职场文书
python如何在word中存储本地图片
2021/04/07 Python