输入值将保存在哪里? [英] Where input value will be saved?

问题描述

假设我们有以下HTML:

Let's say we have following 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 ，但是如果我执行

It seems like input doesn't have attribute value, but if I execute

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

我会得到:

""
""

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

as output. Then if I type in input field 123 and execute one more time:

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

输出将是:

"123"
""

---

此示例表示 input 字段具有属性 value .问题是:

---

This example means there is an attribute value for an input field. The question is:

此值(默认值和当前值)存储在何处，因为HTML对此没有任何信息?

Where this values(default and current) are stored, since HTML doesn't have any information about it?

推荐答案

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

The value of an input is its internal state. It may or may not equal the value attribute on an input element.

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

A control’s value is its internal state. As such, it might not match the user’s current input.

例如，如果用户在需要数字的数字字段中输入单词三"，则用户的输入将是字符串三"，但控件的值将保持不变.或者，如果用户在电子邮件字段中输入电子邮件地址"[e-mail]"(带有前导空格)，则用户的输入将是字符串"[e-mail]"，但浏览器的电子邮件字段UI可能会将其翻译为变成"[e-mail]"的值(不带前导空格).

For instance, if a user enters the word "three" into a numeric field that expects digits, the user’s input would be the string "three" but the control’s value would remain unchanged. Or, if a user enters the email address " [e-mail]" (with leading whitespace) into an email field, the user’s input would be the string " [e-mail]" but the browser’s UI for email fields might translate that into a value of "[e-mail]" (without the leading whitespace).

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

输入中的"value"属性仅表示其默认值:

Whereas the "value" attribute on an input merely represents its default value:

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

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

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

Keep in mind that even if the user enters any text into the input, it will not update the value attribute of the input. Try typing in text into the input in snippet below, and notice that the value attribute doesn't get updated:

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

这篇关于输入值将保存在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！