當您鍵入並保持光標移動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小提琴：

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