将值设置为与其他输入字段发生变化时的输入字段

时间:2018-12-05 17:39:19

标签: javascript html javascript-events onchange

我对javascript完全陌生,目前我正尝试为由另一个输入字段中的onchange事件触发的输入字段设置值。

代码示例-输入字段1:

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

现在,我想使用从上面的onchange触发的方法返回的值分配以下输入字段的值:

<input type='text'>

有人知道如何解决吗?

1 个答案:

答案 0 :(得分:1)

只需为每个输入分配一个标识符,然后将输入传递给函数:

<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进行更新。如果您愿意,可以使用keyupkeypress之类的其他东西来获得更实时的更新。

您也可以在不使用更干净的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>