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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
Script的加载方法小结
Jan 12 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 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
咖啡语言
2021/03/03 咖啡文化
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
php连接mysql数据库
2017/03/21 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python将字符串转换成数组的方法
2015/04/29 Python
Scrapy的简单使用教程
2017/10/24 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
开学寄语大全
2014/04/08 职场文书
运动员口号
2014/06/09 职场文书
朋友聚会开场白
2015/06/01 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
java设计模式--原型模式详解
2021/07/21 Java/Android
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript