how to force a collection of inputs to always have the same value when typing in them?

I’m looking for a method to give the same value to a collection of inputs when i type something on them, lets say we have 10 of them,and i type the word “dog” to one of them,then all of them get the word “dog”,then i type the word “cat” to an other one,every one gets the word “cat”.

Something like this,which is not valid,but i just want to explain the logic :

$(document).on('input', 'input', function () {

$("#main input").each(function() {

$(this).val($(this).val())

});

});

JavaScript
​x
 
$(document).on('input', 'input', function () {
​
$("#main input").each(function() {
​
$(this).val($(this).val())
​
});
​
});
​
​

Any ideas?

input{
position:relative;
float:left;
clear:both;
margin-bottom:1px;
width:85px;
text-align:center;
}

JavaScript
 
input{
position:relative;
float:left;
clear:both;
margin-bottom:1px;
width:85px;
text-align:center;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="main">
<input>
<input>
<input>
<input>
<input>
<input>
<input>
<input>
<input>
<input>
</div>
</body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="main">
<input>
<input>
<input>
<input>
<input>
<input>
<input>
<input>
<input>
<input>
</div>
</body>
</html>

Answer

Off the top of my head I’d do it like this but then again I haven’t written jQuery for a while.

Since I assume you might have other input fields on the page I created a data attributed called data-copy to attach our event listener. I was not inclined to do this via a class which is also totally valid mostly because its too easy to attach styles to those classes and then mix functionality and styling. Read more about attribute selectors here: https://api.jquery.com/category/selectors/attribute-selectors/

If you want to do it without attributes you can change the selector to something like this but I would caution you to make it specific to avoid side effects.

$(function() {
  $('#main input').on('keyup', function() {
    const val = $(this).val();
    $('#main input').not(this).val(val);
  });
});

JavaScript
 
$(function() {
  $('#main input').on('keyup', function() {
    const val = $(this).val();
    $('#main input').not(this).val(val);
  });
});
​

$(function() {
  $('[data-copy]').on('keyup', function() {
    const val = $(this).val();
    $('[data-copy]').not(this).val(val);
  });
});

JavaScript
 
$(function() {
  $('[data-copy]').on('keyup', function() {
    const val = $(this).val();
    $('[data-copy]').not(this).val(val);
  });
});

input {
  position: relative;
  float: left;
  clear: both;
  margin-bottom: 1px;
  width: 85px;
  text-align: center;
}

JavaScript
 
input {
  position: relative;
  float: left;
  clear: both;
  margin-bottom: 1px;
  width: 85px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <div id="main">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
  </div>
</body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <div id="main">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
    <input data-copy type="text">
  </div>
</body>
</html>

Advertisement

Answer