如何根据先前的文本输入自动填充 HTML 表单上的输入

Question

求助！我正在摸索一些 jQuery.

这似乎是完美的解决方案：

<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

$(".first").on('keydown',function(){
  $(".second").val($(this).val());
});

但是由于某种原因，它不会在第一次击键时填充，直到第二次击键被击中。问题是，除非用户在下一个字段中添加 space 或制表符，否则最后一个字符不会自动填充

有什么想法吗？

http://jsfiddle.net/fmdwv/1/

Answer 1

问题是 keydown。如果您绑定到 input 或 keyup，那么代码会按您预期的那样工作。（当然，使用 keyup 是不同的，就像你按住它一样，直到你松开它才会触发，这可能会导致一些意想不到的行为。如果 input是不可能的）

原因是 keydown 在输入值之前触发，因此在第一个 keydown 事件中 .first 的 val() 是 ""（一个空字符串）。

Answer 2

使用 keyup 而不是 keydown。有效！

Answer 3

该值不会立即出现，因为 keydown 消息仍需要处理。您可以使用 keyup，但 keyup 的缺点是它有延迟。第一个框会在按下按键时发生变化，甚至在您按住某个键时也会发生变化。当您释放键时，第二个框会更新，但此时第一个框没有任何变化。那个延迟看着就觉得别扭。

$(".first").on('keyup',function(){
  $(".second").val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

您也可以使用 input 事件，正如 Angel Joseph Piscola 正确提到的那样，但浏览器支持还不完善（尽管最重要的浏览器确实支持得很好）。不管怎样，一定要检查它是否支持你想要的平台。

所以这可能是一个不错的选择，具体取决于，但还有另一种解决方案。如果使用setTimeout，可以延迟key的处理。您甚至可以指定 0 毫秒。你实际上做的是等待信号。计时器发送一个信号，该信号由您的回调处理，就像您的按键处理程序一样。但是 keydown 消息的处理已经在排队，因此首先处理。通过使用超时为 0 的 setTimeout，您将尽快调用另一个回调，但在处理 keyup 信号之后。

如您所见，它运行完美，您可以获得流畅的更新，几乎是在第一个框更改时立即更新，甚至在按住某个键时也是如此。

$(".first").on('keydown',function(){
  var me = this;
  setTimeout(function(){
    $(".second").val($(me).val());
  }, 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

如何根据先前的文本输入自动填充 HTML 表单上的输入

How to auto populate input on HTML form based on previous text input

html

debugging

jquery

keydown