实时文本聚焦

Live text focusing

本文关键字：聚焦 文本 实时      更新时间：2023-09-26

我想创建一个程序，我将在输入文本字段中键入一些东西，它将在span区域显示文本字段的当前值。但问题是，当我输入第一个字符时，它什么也没显示，当我输入另一个字符时，它显示第一个字符。但我想要和文本框一样的东西。例如,

输入字段，如果输入1，它什么都不显示，然后我输入2，它显示1，但我想显示当我输入1时，它会显示1当我输入2时，它会显示12 

<script>
i = 0;
$(document).ready(function(){
    $("input").keypress(function(){
         $("span").text(this.value);
    });
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Keypresses: <span>0</span></p>
</body>

查找keyup事件:

$("input").on('keyup', function () {
     $("span").text(this.value);
});

非常简单，无需jQuery即可实现。该示例使用onkeyup事件来确保它捕获最后键入的键。onkeydown也可以工作，但将是一个字符后面的OP已经在问题中指出。

示例-运行代码片段测试 

<html>
<body>
  <input placeholder="enter some text" type="text" onKeyup="this.nextElementSibling.innerHTML = this.value">
  <span style="color: blue;"></span>
</body>
</html>

发生的情况是，keypress事件在值改变之前被触发，因此span正在设置当时已知的值。

与其他用户提到的不同，您不能使用change事件作为触发器(在操作结束时触发)，因为它可能不会触发，直到您从输入中删除焦点。

使用keyup将提供所需的行为。

你最好使用

 $("input").change(...

代替keypress作为事件处理程序

相关文章：