同步兩個HTML元素

Question

我有一個文本區域

<textarea id="realAreaWhereUserTypes"></textarea> 

，我有一個隱藏的輸入字段liek跟隨。

<input id="hiddenUserInput" /> 

TextArea所包含的價值就像如下：

This is my friend @bingo_mingo and this is my another friend @lingo_tingo 

隱藏字段的字段包含相同的文字，但在不同的格式。

This is my friend @a142f2f0-1eda-11e3-ad5f-3c970e02b4ec:bingo_mingo and this is my another friend @a143edr0-1eda-11e3-ad5f-3c970e02b4ec:lingo_tingo 

我想要這兩個字段進行同步。每當我從真正的文本區域刪除一些東西隱藏應該得到更新。如果我開始在主文本中刪除@admin_admin隱藏的文本應該相應地更新。

是否有任何jQuery插件可用於此。

Answer 1

我沒有使用過。你有沒有找過？這可能是一個：http://github.com/ain/jquery-fieldsync而且，這個問題是一個重複：Synchonise 2 input fields, can it be done using jQuery?

Answer 2

使用.clone()從jQuery的。這很容易http://api.jquery.com/clone/

Answer 3

您可以創建一個偵聽器時，它改變，將與更新的文字更新的隱藏字段。

$("#realAreaWhereUserTypes").bind("keyup paste", function() { 
    var newStr = formatName($(this).val()); 
    $("#hiddenUserInput").val(newStr); 
}); 

function formatName(str){ 
    // Do whatever change you need here. 
}