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

【问题标题】：How to synchronize two text box form values?如何同步两个文本框表单值？
【发布时间】：2019-05-24 11:01:13
【问题描述】：

大家好，我是 jQuery 新手。假设我有两个 HTML 文本框。我怎样才能做到这一点，如果我在文本框 A 中写入，那么相同的值会进入文本框 B，如果我在 B 中写入，那么它会进入 A 并与删除文本相同。这在 jQuery 中如何实现？

【问题讨论】：

标签： jquery

【解决方案1】：

这是一种使用 jQuery 的更动态的方式：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="copyMe" type="text" placeholder="Enter a text"/>
<input class="copyMe" type="text" />
<input class="copyMe" type="text" />
<input class="copyMe" type="text" />

【讨论】：

谢谢，您的解决方案适用于 n 个文本框。感谢您的帮助。
很酷，但是当将文本复制到文本字段时（使用鼠标），此解决方案不起作用。在这种情况下，可以使用 .change()

【解决方案2】：

这很简单：

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

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

【讨论】：

【解决方案3】：

比最受好评的答案更有效的方法是：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您必须对每个文本框的 onchange 事件进行函数调用，这将获取一个框的值并将其放入另一个框。

【讨论】：

【解决方案6】：

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

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

【讨论】：