如何避免jQuery的keydown延迟？

Question

目标:

当用户在文本框中键入字符时,会出现一个按钮.当用户使用退格键清除文本框但按住该键几秒钟时,立即隐藏按钮.

问题:

如果用户键入单个字符,并使用退格键将其删除 - 通过按住退格键几秒钟 - 隐藏按钮之前会有一段延迟.仅当用户只键入一个字符然后按住退格键而不放手时才会发生这种情况.如果用户输入多个字符,然后按住退格键直到文本框为空,则隐藏按钮没有延迟.

<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:

http://jsfiddle.net/odkut0dh/

Answer 1

稍微介绍一下情况：

假设该<input>值是"x"并且您键入退格键：
- 当keydown事件触发时，输入的值仍然是"x"。
-keypress着火时，它仍然存在"x"。
如果您不释放该键：
__keydown在延迟一段时间后再次触发，_{具体取决于操作系统，我猜}值是 now ""。
__keypress再次触发，值仍然是""。
__ 当您释放按键时，keyup触发，值为""。
如果您确实释放了该键：
__keypress直接触发，则值为""。

IE10+ 的解决方案是使用 input当 textEditable 元素的内容发生更改时触发的事件，或者按照 @Mayhem 的建议change，该事件甚至不会侦听按键输入，并且具有比input

$('#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>