目标：
当用户在文本框中键入字符时,会出现一个按钮.当用户使用退格键清除文本框但按住该键几秒钟时,立即隐藏按钮.
问题：
如果用户键入单个字符,并使用退格键将其删除 – 通过按住退格键几秒钟 – 隐藏按钮之前会有一段延迟.仅当用户只键入一个字符然后按住退格键而不放手时才会发生这种情况.如果用户输入多个字符,然后按住退格键直到文本框为空,则隐藏按钮没有延迟.
<input type="text" id="tBox"></text> <button type="button" id="btn" style="display:none;">push me</button> $('#tBox').on('keydown keypress keyup',function(){ if($('#tBox').val() !== '') { $('#btn').css({'display':'block'}); } else { $('#btn').css({'display':'none'}); } });
的jsfiddle：
解决方法
一点点演练情况：
假设< input>值为“x”并键入退格键：
– 当keydown事件触发时,输入的值仍为“x”.
– 当按键触发时,它仍然是“x”.
如果您没有释放密钥：
__ keydown再次触发,经过一段时间的延迟,取决于os我估计值现在是“”.
__ keypress再次触发,值仍为“”.
__释放密钥时,keyup会触发,值为“”.
如果您确实释放了密钥：
__ keypress直接触发,值为“”.
IE10的解决方案是使用input事件,该事件将在textEditable元素的内容发生变化时触发,或者如@Mayhem所建议的那样,change事件,它甚至不会监听键输入并且具有比输入更好的浏览器支持
$('#tBox').on('input change',function(e){
if($('#tBox').val() !== '') {
$('#btn').css({'display':'block'});
} else {
$('#btn').css({'display':'none'});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="tBox"></text> <button type="button" id="btn" style="display:none;">push me</button>
