解决JavaScript中点击事件先触发失去焦点导致清除按钮异常消失的问题
在实现类似淘宝登录页的输入框时,常需结合keyup、blur和click事件控制清除按钮的显隐。然而直接绑定这些事件会导致点击清除按钮时,文本框先触发blur事件使按钮隐藏,进而导致click事件无法执行或失效。本文通过引入setTimeout进行延时处理,确保click事件优先于blur执行,从而完美解决该交互问题。
需求背景与问题现象
近期开发公司项目时,界面设计参考了淘宝登录页的交互模式:
1)当文本框内容为空时,右侧不显示清除按钮;一旦输入内容,立即显示清除按钮;
2)文本框失去焦点时,清除按钮隐藏;重新获取焦点时,若框内有内容则显示清除按钮,否则保持隐藏;
3)当文本框有内容且处于焦点状态时,点击清除按钮,文本框内容清空,同时清除按钮隐藏。
起初认为这是一个简单需求,只需结合keyup、blur和click事件即可实现。但实际运行结果与预期不符,具体代码如下:
HTML结构如下:
<div class="input-group">
<input type="text" id="mobile" class="form-control" placeholder="请输入手机号" autocomplete="off" />
<div class="input-group-addon icon-clear"></div>
</div>
初始实现与问题分析
JavaScript逻辑如下:
//绑定监听手机号文本框内容按钮事件
$('#mobile').keyup(function() {
var clearBtn = $(this).parent().find('.icon-clear');
if($(this).val() == '') { clearBtn.hide(); }
else { clearBtn.css('display', 'table-cell'); }
});
//手机号输入框失去焦点,去除清除按钮;获取焦点时,若有值则显示清除按钮
$('#mobile').blur(function() {
$('#mobile').parent().find('.icon-clear').hide();
}).focus(function(){
if($(this).val() != ''){
$(this).parent().find('.icon-clear').css('display', 'table-cell');
}
});
//清除文本框内容事件
$('.icon-clear').click(function() {
$(this).parent().find('input').val('');
$(this).hide();
});
从代码逻辑看似乎没有问题,但实际运行中发现:在文本框输入内容并获取焦点后,尝试点击清除按钮清空内容时,文本框内容并未清空,而清除按钮却先消失了。这令人困惑。
经查阅资料发现,这是因为点击事件触发前,文本框先触发了失去焦点(blur)事件。那么如何解决这个问题呢?
解决方案:延迟处理blur事件
解决方法是在失去焦点(blur)事件中,对隐藏清除按钮的操作进行延迟处理,具体代码如下:
//验证码输入框失去焦点,去除清除按钮;获取焦点时,若有值则显示清除按钮
$('#auth_code').blur(function() {
setTimeout(function() { //进行延时处理,时间单位为千分之一秒
$('#auth_code').parent().find('.icon-clear').hide();
}, 100)
}).focus(function(){
if($(this).val() != ''){
$(this).parent().find('.icon-clear').css('display', 'table-cell');
}
});
经过上述修改后,问题得到完美解决,目前未发现任何副作用。
以上关于解决JavaScript中点击事件先触发失去焦点导致清除按钮异常消失的问题分享完毕,希望能为大家提供参考,也希望大家多多支持本站。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
