同步两个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. 
}