web-dev-qa-db-fra.com

Définir la valeur pour le champ de saisie en cas de changement à partir d'un autre champ de saisie

Je suis complètement nouveau dans Javascript, et actuellement j'essaie de définir une valeur pour un champ d'entrée déclenché par un événement onchange d'un autre champ d'entrée.

Échantillon de code - champ de saisie 1:

<input type='text' onchange='methodThatReturnsSomeValue()'>

Maintenant, je veux attribuer la valeur du champ de saisie suivant à celle renvoyée par la méthode déclenchée par onchange ci-dessus:

<input type='text'>

Est-ce que quelqu'un sait comment cela peut être résolu?

javascripthtmldom-eventsonchange
4
eqinna

Attribuez simplement un identifiant à chaque entrée et transmettez l'entrée à la fonction:

<input type="text" id="myInput1" onchange="myChangeFunction(this)" placeholder="type something then tab out" />
<input type="text" id="myInput2" />

<script type="text/javascript">
  function myChangeFunction(input1) {
    var input2 = document.getElementById('myInput2');
    input2.value = input1.value;
  }
</script>

Vous passez input1 à la fonction comme argument, puis nous obtenons la valeur de input1 et l'affectons comme valeur à input2 après l'avoir trouvé dans le DOM.

Notez que l'événement change ne se déclenchera sur une entrée de texte que si vous supprimez le focus. Ainsi, par exemple, vous devrez sortir du champ pour obtenir le champ 2 pour être mis à jour. Si vous le souhaitez, vous pouvez utiliser autre chose comme keyup ou keypress pour obtenir une mise à jour plus dynamique.

Vous pouvez également le faire sans utiliser d'attribut HTML qui est un peu plus propre:

<input type="text" id="myInput1" />
<input type="text" id="myInput2" />

<script type="text/javascript">
  var input1 = document.getElementById('myInput1');
  var input2 = document.getElementById('myInput2');

  input1.addEventListener('change', function() {
    input2.value = input1.value;
  });
</script>
5
Timothy Fisher