如何同步兩個文本框的表單值？

Question

大家好，我是jQuery的新手。假設我有兩個HTML文本框。我怎麼能做到這一點，如果我在文本框A中寫入，那麼相同的值將發送到文本框B，如果我在B中寫入，那麼它將轉到A並與刪除文本相同。這怎麼能在jQuery中完成？

Answer 1

這是一個更加動態的方式：

<input class="copyMe" type="text" /> 
<input class="copyMe" type="text" /> 
<input class="copyMe" type="text" /> 
<input class="copyMe" type="text" /> 

，代碼：

$(document).ready(function(){ 
    $(".copyMe").keyup(function(){ 
     $(".copyMe").val($(this).val()); 
    }); 
}); 

證明概念：http://jsfiddle.net/MQXCt/

Answer 2

這是很容易的：

$("#textBoxA").keyup(function(){ 
    $("#textBoxB").val($("#textBoxA").val()); 
}); 

$("#textBoxB").keyup(function(){ 
    $("#textBoxA").val($("#textBoxB").val()); 
}); 

Answer 3

你必須把每個文本框的onchange事件函數調用，這將需要一個框的值，並把它放在其他。

Answer 4

使用Snicksie的方法，你可以看到下面的現場演示。我已經包含一個按鈕來重置文本框的值。

http://jsfiddle.net/refhat/qX6qS/5/

Answer 5

比最upvoted答案稍微更有效的方法是：

var $inputs = $(".copyMe"); 
$inputs.keyup(function() { 
    $inputs.val($(this).val()); 
}); 

http://css-tricks.com/snippets/jquery/keep-text-inputs-in-sync/

Answer 6

我今天就遇到了這個難題。我做了一個小插件，使代碼更易讀，並處理文本輸入，但也選擇fe。

當包括插件，你可以簡單地使用$("selector").keepInSync($("otherselector"));

$.fn.keepInSync = function($targets) { 
 
    // join together all the elements you want to keep in sync 
 
    var $els = $targets.add(this); 
 
    $els.on("keyup change", function() { 
 
    var $this = $(this); 
 
    // exclude the current element since it already has the value 
 
    $els.not($this).val($this.val()); 
 
    }); 
 
    return this; 
 
}; 
 

 
//use it like this 
 
$("#month1").keepInSync($("#month2, #month3")); 
 
$("#text1").keepInSync($("#text2"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Two way sync</h1> 
 
<select id="month1"> 
 
    <option value="">Please select a moth</option> 
 
    <option value="jan">January</option> 
 
    <option value="feb">February</option> 
 
    <option value="mar">March</option> 
 
</select> 
 
<select id="month2"> 
 
    <option value="">Please select a moth</option> 
 
    <option value="jan">1</option> 
 
    <option value="feb">2</option> 
 
    <option value="mar">3</option> 
 
</select> 
 
<select id="month3"> 
 
    <option value="">Please select a moth</option> 
 
    <option value="jan">Jan</option> 
 
    <option value="feb">Feb</option> 
 
    <option value="mar">Mar</option> 
 
</select> 
 
<br> 
 
<input type="text" id="text1"> 
 
<input type="text" id="text2">