chrome下判断点击input上标签还是其余标签的实现方法


Posted in Javascript onSeptember 18, 2016

想要实现的功能:当input框失焦且点击的不是清除键时,执行reset方法重置input样式,当点击清除键时,执行clear方法,清除input内容。

如图

chrome下判断点击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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 #Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 #Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 #Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 #Javascript
利用jquery实现瀑布流3种案例
Sep 18 #Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 #Javascript
移动端js触摸事件详解
Sep 18 #Javascript
You might like
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
DWR Ext 加载数据
2009/03/22 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python 爬取微信文章
2016/01/30 Python
python能做哪方面的工作
2020/06/15 Python
Python 创建TCP服务器的方法
2020/07/28 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
创建文明学校实施方案
2014/03/11 职场文书
养牛场项目建议书
2014/05/13 职场文书
党员创先争优心得体会
2014/09/11 职场文书
骨干教师个人总结
2015/02/11 职场文书
银行求职信模板
2015/03/20 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL