时间戳

首页 > 解决方案 > 更改时自动更新文本条目

javascript - 更改时自动更新文本条目

问题描述

我有一个带有两个文本条目的简单 HTML 表单。一旦第一个字段中的文本发生更改，我想将文本从第一个输入字段复制到第二个。当前，仅当我单击第二个条目时才应用更改。如何解决此问题，以便无需单击第二个条目即可看到更改？

<!DOCTYPE html>
<html>
    <body>
        <form onchange="myFunction()">
        <label for="field_1">field 1:</label>
        <input type="text" id="field_1" name="field_1"><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>

标签： javascripthtml

解决方案

input改为监听事件：

<!DOCTYPE html>
<html>
    <body>
        <form oninput="myFunction()">
        <label for="field_1">field 1:</label>
        <input type="text" id="field_1" name="field_1"><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>

推荐阅读