Как синхронизировать два значения формы текстового поля?

Привет всем Я новичок в jQuery. Предположим, у меня есть два текстовых поля HTML. Как я могу заставить это случиться, что если я напишу в текстовое поле A, то такое же значение будет передано в текстовое поле B, и если я напишу в B, тогда оно будет равно A и тому же, что и удаление текста. Как это можно сделать в 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" />

Ответ 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

Вам нужно будет поместить вызов функции в каждое текстовое поле onchange события, которое примет значение одного поля и поместит его в другое.

Ответ 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"));

<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">

Ответ 6

Используя метод Snicksie, вы можете увидеть демо-версию ниже. Я также добавил кнопку reset значения текстового поля.

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