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());
});

然而，由于某些原因，它不会在第一次击键时填充，直到第二次击键被击中。问题是除非用户添加空格，或者标签到下一个字段，否则最后一个字符不会自动填充

有什么想法吗？

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

Answer 1

问题是keydown。如果绑定到input或keyup，则代码将按预期运行。（当然，keyup与input有所不同，就好像你按住它一样，直到你放手才会开火，这可能会导致一些意想不到的行为。@ GolezTrol的答案是{{1}的一个很好的选择。是不可能的）

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

Answer 2

该值不会立即生效，因为仍需要处理keydown消息。你可以使用keyup，但keyup的缺点是它有延迟。第一个框在keydown上更改，甚至在您按住键时更改。释放密钥时，第二个框会更新，但此时第一个框中没有任何变化。当你看到它时，这种延迟感觉很尴尬。

＆＃13;

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

＆＃13;

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

＆＃13;

您也可以使用input事件，正如Angel Joseph Piscola正确提到的那样，但浏览器支持并不完美，（尽管最重要的浏览器确实支持它很好）。无论如何，请务必检查它是否支持您想要的平台。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用keyup而不是keydown。它有效！

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

3 个答案: