Question

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

我想知道，输入和输出之间是否有一个字符（或更确切地说：一次击键）延迟

例如：

我输入＆＃39; abcde＆＃39;
输出是＆＃39; abcd＆＃39;
但是，如果我按下插入键，最终的＆＃39;打印。

我的代码：

＆＃13;

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

＆＃13;

有什么想法吗？感谢

Answer 1

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

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

以下是DEMO

Answer 2

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

来自jQuery＆＃39; keypress docs：

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

使用keyup来解决问题：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

javascript输入和输出之间的一次（按键）事件延迟

3 个答案: