javascript - 如何使用 jQuery 避免按键延迟？

目标：

当用户在文本框中输入字符时，让一个按钮出现。当用户使用退格键清空文本框但按住该键几秒钟时，立即隐藏按钮。

问题：

如果用户输入了一个字符，然后使用退格键将其删除——通过按住退格键几秒钟——按钮被隐藏之前会有延迟。这种情况只会在用户只输入了一个字符然后按住退格键不放时发生。如果用户输入了多个字符，然后按住退格键直到文本框为空，隐藏按钮时就不会有延迟。

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

答案＃1

对情况做一个小小的讲解：

假设 <input> 的值是 "x"，并且你按下退格键：
- 当 keydown 事件触发时，输入框的值仍然是 "x"。
- 当 keypress 事件触发时，值仍然是 "x"。
如果你不松开按键：
__ keydown 会再次触发，经过一段延迟后，_{根据操作系统可能不同}，值现在是 ""。
__ 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>

答案＃2

由于我已经对这个做过评论，我快速谷歌了一下，发现了这篇文章，可能会让事情更容易一些……使用 JQuery 检测对的所有更改（立即）

所以我把它放到这里的一个小工具里给你测试：轻微修改版

HTML

<input type="text" value="Some Value" id="text1" />
<button id="btn1">Click Me</button>

 $('#text1').each(function() {
   var elem = $(this);
   elem.data('oldVal', elem.val());
   elem.bind("propertychange change click keyup input paste", function(event){
      if (elem.data('oldVal') != elem.val()) {
          if (elem.val().length == 0 ) {
              $("#btn1").hide();
          } else {
              $("#btn1").show();
          }
       elem.data('oldVal', elem.val());
     }
   });
 });

由于我没有太多时间把这段代码拆分成部分……乍一看……你不需要 elem.data……只需要绑定事件……啊，看起来我决定为你简化代码……

http://jsfiddle.net/z2ew3fqz/3/ 使用相同的HTML...

我能根据上面给出的例子做的最短版本

HTML

<input type="text" value="Some Value" id="text1" />
<button id="btn1">Click Me</button>

 $('#text1').bind("propertychange change click keyup input paste", function(event){
     if ($(this).val().length == 0 ) {
         $("#btn1").hide();
     } else {
         $("#btn1").show();
     }
 });

我已经在 Chrome 上快速测试过了……鼠标/功能键似乎都能正常影响它……其他浏览器我就留给原帖者自己测试了……如果在某个特定浏览器有问题，请告诉我……

IE10 似乎是对此的最低支持……IE9 可能可以完成一个 JS 原型.. 但是在你的项目中，为支持 IE<10，这有多重要？