为什么 jQuery 的 .val() 方法只能改变隐藏输入字段的值属性？

Question

我们使用了一些非常简单的jQuery来改变文本框的值：

<input type="text" name="rabatt" id="sonderrabatt" value="">
var sonderrabatt = 10;
$('#sonderrabatt').val(sonderrabatt);

这将改变在浏览器中显示的值，但不会改变源代码中文本字段的值属性。

现在，考虑一下这个例子：

<input type="hidden" name="rabatt" id="sonderrabatt" value="">
var sonderrabatt = 10;
$('#sonderrabatt').val(sonderrabatt);

将输入类型更改为隐藏并且值属性确实会更改！

1.这是否意味着我们必须执行以下操作才能更改在浏览器中显示的输入字段的值以及在源代码中的值属性？:

<input type="text" name="rabatt" id="sonderrabatt" value="">
var sonderrabatt = 10;
$('#sonderrabatt').val(sonderrabatt);
$('#sonderrabatt').attr('value',sonderrabatt);

2.为什么.val()方法适用于type=hidden输入字段，但不适用于type=text输入字段？

- Richard Tinkler

---

为什么您想要更改“text”字段的实际“value”属性？ - tymeJV

你可以使用$('#sonderrabatt').attr('value', 'newvalue');，但是为什么要这样做呢？ - Keammoort

浏览器将跟踪输入的“真实”值，我不确定它是否会回退到值属性，如果没有值存在。我仅在页面加载时使用值属性进行输入值初始化。 - Ji_in_coding

同样的，对于数据属性，在文档中可以找到以下内容： “当第一次访问数据属性时，数据属性会被提取，然后不再被访问或改变（所有数据值都会在 jQuery 中内部存储）。” http://api.jquery.com/data/ - Sergiy Kozachenko

根据 jQuery 的文档，val() 应该完美地起作用。请参见此处：http://api.jquery.com/val/ 你是否在输入 HTML 之后编写了你的脚本？ - Imran

Answer 1

.val()更改的是元素的属性值，而不是属性值。属性是在初始呈现时HTML所显示的内容，属性包含在DOM对象中的实际值，可以多次更改，但在初始呈现后可能不会在HTML中显示。

.val(myValue)是.prop('value', myValue)的简写。

在普通的JavaScript中：

element.value = myValue; // set property on DOM object
element.setAttribute('value', myValue); // set attribute on HTML element

只需记住：

• DOM元素（HTML）→属性

• DOM对象（JS）→属性

相关信息：

• .prop() vs .attr()

- Miguel Mota