chrome下判断点击input上标签还是其余标签的实现方法
更新时间：2016年09月18日 12:00:50 投稿：jingxian
下面小编就为大家带来一篇chrome下判断点击input上标签还是其余标签的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
想要实现的功能：当input框失焦且点击的不是清除键时，执行reset方法重置input样式，当点击清除键时，执行clear方法，清除input内容。
如图
本想通过如下代码来实现
$(".search-input").focusout(function () {
if (document.activeElement.className !== 'close-t') {//close-t为清除键类名
$('.search-input').addClass('search-before');
$('.close').css('display', 'none');
document.getElementById('search').value = '';
}
});
以外的发现，当inpu框失焦后，首先获得焦点的，竟是body标签，也因为这样，该方法失效了，最后采用以下代码来实现的该功能
$("#search").focusout(function () {
//判断失焦后是否点击的是清除钮，若是则不重置
var tapCloseButton = false;
$('.close-t').focus(function () {
tapCloseButton = true;
});
setTimeout(function () {
if (!tapCloseButton) {
$('.search-input').addClass('search-before');
$('.close').css('display', 'none');
document.getElementById('search').value = '';
}
},10);
});
将焦点判断这一步骤延迟执行，故此时焦点已经从body上移到了真正所点击的元素上，此时再对焦点进行判断，看是否为清除键。
以上这篇chrome下判断点击input上标签还是其余标签的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在前端开发中经常会遇到这样一种需求,使用Javascript格式化数字进行输出,下面这篇文章主要给大家介绍了关于js金额千分位的6种实现方法,需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JS实现文字向下滚动的方法,以一个完整实例形式详细分析了html页面布局、css样式及对应的js滚动功能实现技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了javascript 产生随机数的几种方法总结的相关资料,希望通过本文大家能够掌握如何实现这样的方法，需要的朋友可以参考下2017-09-09
在JavaScript中,可以使用Date对象来获取本月的开始时间和结束时间,本文通过代码示例详细的给大家介绍了JS获取本月的开始时间与结束时间,感兴趣的小伙伴跟着小编一起来看看吧2023-08-08
经常使用其他脚本语言（ASP ASP.NET PHP等）获取页面的浏览来源，今天我们来研究下使用Javascript以及C#获取页面的referer。2014-11-11
这篇文章主要介绍了js实现获取div坐标的方法,通过调用jQuery插件实现获取div元素坐标的功能,非常简单实用,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了JavaScript中通用的jquery动画滚屏实例,本文通过实际代码来详解实现方法,需要的朋友可以参考一下2022-07-07
这篇文章主要介绍了微信小程序动画组件，类似vue，且更强大使用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
下面小编就为大家带来一篇判断颜色是否合法的正则表达式(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论