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对此没有任何信息？

Answer 1

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

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

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

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

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

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

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

Answer 2

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

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

那就像

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

如果您将值写为value="123"，则值和默认值属性会相应更改。

任何DOM元素的数据都存储在该选项卡的浏览器内存中，由该选项卡自行管理。由于您的Java语言只是该内存的一部分，因此以某种方式存储在其中。所有工作原理的实际细节都隐藏在浏览器中，并且在浏览器之间可能有所不同。

输入值将保存在哪里？

2 个答案: