javascript - 将值设置为输入字段 onchange 从其他输入字段
问题描述
我对 Javascript 完全陌生,目前我正在尝试onchange
为由另一个输入字段中的事件触发的输入字段设置一个值。
代码示例 - 输入字段 1:
<input type='text' onchange='methodThatReturnsSomeValue()'>
现在我想用从onchange
上面触发的方法返回的值分配以下输入字段的值:
<input type='text'>
有谁知道如何解决这个问题?
解决方案
只需为每个输入分配一个标识符,并将输入传递给函数:
<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
作为参数传递给函数,然后我们获取 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>
推荐阅读
- java - 堆中对象的内存引用是否会耗尽空间?
- excel - Excel。日期和时间 = 轮班 X
- c# - 外部表外键值始终显示 null ef core 3.1
- r - 为什么我不能在 Rstudio 中为我的条形图添加颜色?
- azure - 使用 MSDeploy 将 Web 应用程序部署到 Azure 应用服务
- c++ - 如何在 C++ 中将链表的起始指针作为指针传递
- c++ - 无法在 Visual Studio 2019 中选择 C++ 语言标准
- java - jaxb2:xjc 两个声明导致 ObjectFactory 类中的冲突。在 XSD 中使用类型扩展时
- user-interface - Blender - 使用 bpy 插入文本按钮
- tensorflow - 一维信号阵列上的异步损失函数