JavaScript输入和输出之间的一个(按键）事件延迟

One-( keypress-)event-delay between javascript input and output

本文关键字：一个 输入 按键 事件 延迟 输出 之间 JavaScript      更新时间：2023-09-26

以下代码片段使用简单的javaScript和jQuery重现网页中的输入文本。

不过，我想知道为什么输入和输出之间有一个字符（或者更准确地说：一个击键）延迟

例如：

  1. 我输入"abcde"

  2. 输出为"ABCD"

  3. 但是，如果我按插入键，最终的"e"打印。

我的代码 ： 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="text" name="enteredText" id="myTextInput" />
    <p id="myTextOutput">
    blabla 
    </p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
  $("#myTextInput").keypress(function( ){
    var theText = $("#myTextInput").val();
    $("#myTextOutput").html(theText); 
  });
$( "html" ).click(function( event ) {
 
    var value = $("#myTextInput").val();
    $("#myTextOutput").html(value); 
 
});
    </script>
  </body>
</html>

知道吗？谢谢

如果你想摆脱tat延迟。 使用 keyup 或 keydown 代替 keypress ：

$("#myTextInput").keyup(function( ){
    var value = $("#myTextInput").val();
    $("#myTextOutput").html(value); 
  });

这是演示

最可能的原因是keypress事件处理程序是在更新输入字段的内容之前执行的。当您阅读内容时，您仍然阅读旧内容，而不是更新的内容。

来自jQuery的keypress文档：

注意：由于任何官方规范都没有涵盖按键事件，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

改用keyup可以解决此问题：

  $("#myTextInput").keyup(function() {
    var theText = $("#myTextInput").val();
    $("#myTextOutput").html(theText);
  });
  $("html").click(function(event) {
    var value = $("#myTextInput").val();
    $("#myTextOutput").html(value);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="enteredText" id="myTextInput" />
<p id="myTextOutput">
  blabla
</p>

在允许事件传播到文本字段更新的位置之前，您正在获取该值。 您可以添加无穷小的延迟来获取完整值：

$("#myTextInput").keypress(function( ){
    setTimeout(function() {
       var value = $("#myTextInput").val();
      $("#myTextOutput").html(value);
    }, 0);
  });
相关文章：