如何实现HTML表单第一个输入框内容变化时自动同步到第二个输入框

问题原因 #

你当前绑定的onchange事件触发条件是输入框失去焦点时才会执行，所以只有你点击第二个输入框、让第一个输入框失焦后，同步逻辑才会运行。

解决方法 #

把触发事件换成oninput即可，oninput会在输入框内容发生任何变化时立即触发，无需失焦。推荐将事件直接绑定到第一个输入框上，避免不必要的事件触发：

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <body>
        <form>
        <label for="field_1">field 1:</label>
        <input type="text" id="field_1" name="field_1" oninput="myFunction()"><br><br>
        <label for="field_2">field 2:</label>
        <input type="text" id="field_2" name="field_2"><br><br>
        </form>

        <script>
            function myFunction() {
                var x = document.getElementById("field_1").value;
                document.getElementById("field_2").value = "copy: " + x;
            }
        </script>
    </body>
</html>

可选替代方案 #

如果你不想改动事件绑定位置，也可以直接把<form>标签上的onchange="myFunction()"改成oninput="myFunction()"，不过这个方案会让表单内所有输入元素变化都触发同步逻辑，性能不如直接绑定到第一个输入框。

内容的提问来源于stack exchange，提问作者EXIT_FAILURE