解决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 相关文章推荐
农历与西历对照
Sep 06 Javascript
重定向实现代码
Nov 20 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
js实现简易计算器功能
Oct 18 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
微信小程序之判断页面滚动方向的示例代码
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 SQL防注入代码集合
2008/04/25 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
python读取ini配置文件过程示范
2019/12/23 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
浪漫婚礼主持词
2014/03/14 职场文书
目标责任书范本
2014/04/16 职场文书
国旗下演讲稿
2014/05/08 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
就业意向协议书
2015/01/29 职场文书
领导视察通讯稿
2015/07/18 职场文书
python如何获取网络数据
2021/04/11 Python
Python基础之元组与文件知识总结
2021/05/19 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫