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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JS跨域总结
Aug 30 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 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二维数组用键名分组相加实例函数
2013/11/06 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
化工工艺专业求职信
2013/09/22 职场文书
绩效工资分配方案
2014/01/18 职场文书
单位成立周年感言
2014/01/26 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
公司安全管理制度范本
2015/08/05 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript