web-dev-qa-db-ja.com

他の入力フィールドからの変更時に値を入力フィールドに設定します

私は完全にJavaScriptを使い始めたばかりですが、現在、別の入力フィールドからのonchangeイベントによってトリガーされた入力フィールドに値を設定しようとしています。

コードサンプル-入力フィールド1：

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

次の入力フィールドの値に、上記のonchangeからトリガーされたメソッドから返された値を割り当てます。

<input type='text'>

これを解決する方法を誰かが知っていますか？

javascripthtmldom-eventsonchange
4
eqinna

各入力に識別子を割り当て、その入力を関数に渡すだけです。

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

input1を引数として関数に渡し、DOMで見つかった後、input1の値を取得し、input2に値として割り当てます。

フォーカスを削除した場合、変更イベントはテキスト入力でのみ発生することに注意してください。したがって、たとえば、更新するにはフィールド2を取得するためにフィールドからタブ移動する必要があります。必要に応じて、keyupやkeypressなどの別のものを使用して、よりライブな更新を取得できます。

HTML属性を使用せずにこれを行うこともできます。

<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