Input mirror

by serg_x

HTML

<h3>Связать значения инпутов через jQuery</h3>
<table>
  <tr>
    <td>
      <p>Будет менять <i>поле 2</i></p>
      <input type="text" class="inp1" data-mirrorto=".inp2">
      <div class="c">Поле 1</div>
    </td>
    <td>
      <p>Будет менять <i>поле 1 и 3</i></p>
      <input type="text" class="inp2" data-mirrorto=".inp1,.inp3">
      <div class="c">Поле 2</div>
    </td>
    <td>
      <p>Будет менять <i>поле 4</i></p>
      <input type="text" class="inp3" data-mirrorto=".inp4">
      <div class="c">Поле 3</div>
    </td>
    <td>
      <p>Не будет менять ни кого</p>
      <input type="text" class="inp4">
      <div class="c">Поле 4</div>
    </td>
  </tr>
</table>

<p>Значение второго поля: <span class="s"></span></p>

CSS

* {
  font-family: 'Roboto', 'Open sans', sans-serif;
}

input {
  font-size: 18px;
  padding: 2px 5px;
  width: 173px;
}
.c{
  padding-top: 3px;
  text-align: center;
}
table{
  margin-bottom: 10px;
  max-width: 840px;
}

JavaScript

// webstool.ru
$(document.body).on("change input", "[data-mirrorto]", function(e, param1) {
  if (param1) {
    return true;
  }
  var t = $(this);
  var to_selector = $(this).data("mirrorto");
  // Записываем значение и дергаем событие
  $(to_selector).val(t.val()).trigger(e.type, true);
});

// Проверка работы событий
$(document.body).on("change input", ".inp2", function(e) {
  //console.log($(this).val());
  $(".s").text($(this).val());
});