如何同步两个文本框的表单值？

大家好我是jQuery的新手。 假设我有两个HTML文本框。 如果我在文本框A中写入，那么相同的值将转到文本框B，如果我在B中写入，那么它将转到A，与删除文本相同。 怎么能在jQuery中完成？

Answer 1

这是一种更动态的方式：

和代码：

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

概念certificate： http ： //jsfiddle.net/MQXCt/

Answer 2

这很简单：

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

Answer 3

比最热烈的答案更有效的方式是：

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

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

Answer 4

你必须在每个文本框的onchange事件上放置一个函数调用，它将获取一个框的值并将其放在另一个框中。

Answer 5

我今天遇到了这个挑战。 我制作了一个小插件，使代码更具可读性并处理文本输入，但也选择了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")); 

  
Two way sync
  Please select a moth January February March   Please select a moth 1 2 3   Please select a moth Jan Feb Mar  
   

Answer 6

使用Snicksie的方法，您可以在下面看到现场演示。 我还包含一个按钮来重置文本框值。

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