相思资源网 Design By www.200059.com
想要实现的功能:当input框失焦且点击的不是清除键时,执行reset方法重置input样式,当点击清除键时,执行clear方法,清除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上标签还是其余标签的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
input标签点击
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无chrome下判断点击input上标签还是其余标签的实现方法的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。