使用 JavaScript 修改 "text" 输入的 "value" 属性无效

Question

我有一个关于文本输入字段的问题，其值由 JavaScript 函数修改。这是我的代码的简化片段：

<!doctype html>
<html>
    <meta charset="utf-8">
    <head>
        <title>Test Page</title>
        <script>
            function runScript()
            {
                document.getElementById("result").innerHTML = "Changing Text Input Value to Name 2";
                document.getElementById("name_input0").value = "Name 2";
                document.getElementById("name_hidden0").value = "Name 2";
            }
        </script>
    </head>
    <body>
    <input type="hidden" id="name_hidden0" value="Name 1"/>
    <input type="text" name="name_enter0" id="name_input0" value="Name 1"/>
    <input type="button" value="Run Script" onClick="runScript()"/>
    <div id="result"></div>
    </body>
</html>

当页面加载时，文本和隐藏输入都填充了值 "Name 1"。当我点击按钮时，页面如下所示：

这非常有道理，但是，如果我使用开发人员工具（我尝试过 Firefox 和 Chrome）查看源代码并查看 HTML 代码，我会看到以下内容：

为什么文本输入字段的 "value" 属性在底层 HTML 中没有改变，但隐藏输入 "value" 却改变了？

Answer 1

对于文本输入：

HTML value 属性设置默认值。

DOM value 属性保存当前值。

它们之间没有 1:1 映射。

使用 JavaScript 修改 "text" 输入的 "value" 属性无效

Modifying "value" attribute of "text" input not working using JavaScript

html

javascript

dom

textbox