输入和输出在jQuery函数中不相等

Question

为什么段落的文字总是背后的一个字母？

它不应该自动"复制"输入的值为段落，并且始终是同一文本？

如何解决此问题？

$(function() {
  $("input").keydown(function() {
    $("p").text($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<p></p>

Answer 1

在 .keydown()上，该值尚未传播到表单元素。尝试.keyup()。（还有.change()，只有一旦元素失去焦点就可以触发。）

Answer 2

如果您使用键盘事件，则可以根据需要工作。我相信这是因为键盘事件在值填充到文本字段之前就发射了。

Answer 3

问题是，每个输入元素的事件 keydown都没有更改。

尝试使用jQuery .Keyup（）：

$('input').keyup(function() {
  $('p').text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<p></p>

Answer 4

我建议使用 input事件，因为在跟踪用户输入时效率更高：

$('input').on('input', function() {
  $('p').text($(this).val());
});

对于多个input/paragraph，您可以使用.next()功能来定位相关的p：

 $('input').on('input', function() {
  $(this).next('p').text($(this).val());
});

代码：

$('input').on('input', function() {
  $(this).next('p').text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<p></p>
<input>
<p></p>
<input>
<p></p>
<input>
<p></p>
<input>
<p></p>