Question

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

不应该自动＆＃34;复制＆＃34;段落输入的值始终是相同的文本？

如何解决此问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在.keydown()上，该值尚未传播到表单元素。试试.keyup()。（还有.change()，只有在元素失去焦点时才会触发。）

Answer 2

问题是每次触发input元素的事件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 3

如果您使用keyup事件，它可以按您的意愿工作。我相信这是因为keydown事件在值填充到文本字段之前触发，因此无法使用。

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

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: