eqi*_*nna 5 html javascript onchange dom-events
我是 Javascript 的新手,目前我正在尝试onchange为由另一个输入字段的事件触发的输入字段设置一个值。
代码示例 - 输入字段 1:
<input type='text' onchange='methodThatReturnsSomeValue()'>
Run Code Online (Sandbox Code Playgroud)
现在我想用从onchange上面触发的方法返回的值分配以下输入字段的值:
<input type='text'>
Run Code Online (Sandbox Code Playgroud)
有谁知道如何解决这个问题?
只需为每个输入分配一个标识符,并将输入传递给函数:
<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>Run Code Online (Sandbox Code Playgroud)
您将input1函数作为参数传递给函数,然后我们获取 input1 的值,input2并在 DOM 中找到它后将其作为值分配给它。
请注意,如果您移除焦点,则更改事件只会在文本输入上触发。因此,例如,您必须退出该字段才能使字段 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>
Run Code Online (Sandbox Code Playgroud)