如何使用jQuery避免keydown延迟

How to avoid keydown delay with jQuery?

本文关键字：keydown 延迟 避免 jQuery 何使用      更新时间：2023-09-26

目标：

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

问题：

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

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

情况简介：

假设<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>

正如我对这篇文章所做的评论一样，我快速搜索了一下，发现了这篇文章，这可能会让它变得更容易。。检测对<输入类型＝"；文本">(立即(使用JQuery

所以我把它放在小提琴里让你测试：轻微修改版本

HTML

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

JS

 $('#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.数据…只需要绑定事件。。。…啊好像我决定给你缩短代码。。。

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

我可以从上面给出的例子中制作的最短版本

HTML

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

JS

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

我很快在chrome上测试了这个。。鼠标/功能键似乎都能正确地影响它。。。其他浏览器我将留给OP来测试。。如果特定浏览器中有任何问题，请告诉我。。

IE10似乎是对此的最低支持。。IE9也许可以完成js原型。。但这对您的项目支持有多重要？以支持IE<10？

问题是$('#tbox'(.val((；按退格键时不为空(''(。因此，您必须延迟值检查。

当您按下该键时，首先会触发keydown事件，然后在输入字段上执行键操作。

$('#tbox').on('keydown keypress keyup',function(){
    setTimeout(function () {
          if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }  
},0);
});

您可以通过全局变量在向上键时控制来防止重复向下键

var allow = true;
$(document).on('keydown', function(e) { 
  if (e.repeat != undefined) {
    allow = !e.repeat;
  }
  if (!allowed) return;
  allowed = false;
  if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});
$(document).keyup(function(e) { 
  allowed = true;
});
相关文章：