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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
详解Vue slot插槽
Nov 20 Vue.js
通过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将向Java靠拢
2006/10/09 PHP
我的论坛源代码(五)
2006/10/09 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php微信支付之APP支付方法
2015/03/04 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
Python中的作用域规则详解
2015/01/30 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python实现视频下载功能
2017/03/14 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Django如何配置mysql数据库
2018/05/04 Python
NumPy 数组使用大全
2019/04/25 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
银行简历自我评价
2014/02/11 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
家装业务员岗位职责
2015/04/03 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
python实现A*寻路算法
2021/06/13 Python