输入值将保存在哪里？

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"
""

---

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

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

Answer 1

存储在 DOM 元素对象的属性中。默认情况下，如果你写：

<input id="input_id" type="tel" required="" pattern="^\d{10}$"> 

然后就是这样

<input id="input_id" type="tel" required="" pattern="^\d{10}$" value="">

如果您在 value 中写入 value="123"，则 value 和 default value 属性会相应更改。

DOM 元素的任何数据都存储在浏览器的内存中，由浏览器自行管理。由于您的 Javascript 只是该内存的一部分，因此它以某种方式存储在那里。所有工作原理的实际细节隐藏在浏览器中，并且可能因浏览器而异。

Answer 2

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

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

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

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

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

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

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

请记住，即使用户在输入中输入任何文本，它也不会更新输入的 value 属性。尝试在下面的 sn-p 中输入文本，注意 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">