javascript - 输入值将保存在哪里？

Question

假设我们有以下 HTML：

<div class="form-group">
    <label class="col-md-3 col-xs-3 col-sm-3 control-label">Phone</label>
    <div class="col-md-4 col-xs-4 col-sm-4">                   
        <input id="input_id" type="tel" required="" pattern="^\d{10}$"> 
    </div>
</div>

似乎input没有属性value，但如果我执行

document.querySelector('#input_id').value;
document.querySelector('#input_id').defaultValue;

我会得到：

""
""

作为输出。然后，如果我在输入字段中输入123并再执行一次：

document.querySelector('#input_id').value;
document.querySelector('#input_id').defaultValue;

输出将是：

"123"
""

---

value这个例子意味着一个字段有一个属性input。问题是：

这个值（默认值和当前值）存储在哪里，因为 HTML 没有关于它的任何信息？

标签： javascripthtmlhtml-input

Answer 1

输入的值是它的内部状态。它可能等于也可能不等于输入元素上的 value 属性。

控件的值是其内部状态。因此，它可能与用户的当前输入不匹配。

例如，如果用户在需要数字的数字字段中输入单词“three”，则用户的输入将是字符串“three”，但控件的值将保持不变。或者，如果用户在电子邮件字段中输入电子邮件地址“[e-mail]”（带有前导空格），则用户的输入将是字符串“[e-mail]”，但电子邮件字段的浏览器 UI 可能会将其转换为变成“[e-mail]”的值（没有前导空格）。

_{https://www.w3.org/TR/html51/sec-forms.html#forms-value}

而输入上的“值”属性仅表示其默认值：

value 内容属性给出了输入元素的默认值。在添加、设置或删除 value 内容属性时，如果控件的脏值标志为 false，则用户代理必须将元素的值设置为 value 内容属性的值，如果有，则为空字符串否则，然后运行当前值清理算法（如果已定义）。

_{https://www.w3.org/TR/html51/sec-forms.html#element-attrdef-input-value}

请记住，即使用户在输入中输入任何文本，它也不会更新输入的 value 属性。尝试在下面的代码片段中输入文本，并注意 value 属性没有更新：

setInterval(function() {
  console.clear();
  console.log("Attribute: ", $("input").attr("value"));
  console.log("Value: ", $("input").val());
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input value="default">