jQuery 在您键入时复制文本并保持光标移动答案

【问题标题】：jQuery Duplicate Text As You Type and Keep the Cursor MovingjQuery 在您键入时复制文本并保持光标移动
【发布时间】：2016-01-31 07:07:51
【问题描述】：

我正在使用这个 jQuery 代码将我在一个输入字段中输入的内容实时复制到另一个输入字段。有用;但是，当我在第一个字段中输入很多内容时，光标会继续移动，显示我正在输入的任何内容。在第二个字段中，我输入的任何内容都会被覆盖，因为光标不会移动。我怎样才能使文本在第二个字段中键入的最新字符也可见？

$("#text_1").keyup(function() {
    $("#text_2").val( $("#text_1").val() );
})

<label>TEXT 1: </label><input type="text" id="text_1" value=""/>
<br>
<label>TEXT 2: </label><input type="text" id="text_2" value=""/>

这是 JS 小提琴：

https://jsfiddle.net/d5vkrLve/

请注意，如果您在第一个框中键入很多内容，您可以看到最新的文本，因为光标会移动，但在第二个框中，文本不会移动。您看不到最新的文字。

【问题讨论】：

标签： jquery text input duplicates keyup

【解决方案1】：

将文本放在 span 这样的内容元素中

HTML

<label>TEXT 1: </label>
<input type="text" id="text_1" value="" />
<br>
<label>TEXT 2: </label>
<span id="text_2"></span>

$("#text_1").keyup(function() {
  $("#text_2").text($("#text_1").val());
});

DEMO

【讨论】：

很好的答案——这正是我想要的。谢谢。