jQuery 键入时复制文本并保持光标移动

Question

我正在使用此 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 Fiddle:

https://jsfiddle.net/d5vkrLve/

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

Answer 1

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

HTML

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

JS

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

DEMO

jQuery 键入时复制文本并保持光标移动

jQuery Duplicate Text As You Type and Keep the Cursor Moving

jquery

text

input

duplicates

keyup