在实现类似淘宝登录页的输入框时，常需结合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中点击事件先触发失去焦点导致清除按钮异常消失的问题分享完毕，希望能为大家提供参考，也希望大家多多支持本站。