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 相关文章推荐
javascript全局变量封装模块实现代码
Nov 28 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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学习教程之第1天
2008/06/15 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
详解PHP PDO简单教程
2019/05/28 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
js date 格式化
2017/02/15 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python如何存储数据到json文件
2020/03/09 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
阳光体育活动实施方案
2014/05/25 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
画展邀请函
2015/01/31 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python