javascript - HTML 输入值属性 - 相同的输入，(显然)不同的结果

Question

通过输入框进行编辑后，html 输入标签的值属性如何工作？

例子:

<input type="text" name="test" id="test" value="Hello world" />

这将显示一个带有文本“Hello world”的输入框。如果我编辑它，将一个新字符串输入到呈现的文本框中(不是通过原始代码)，然后尝试像这样使用 js 获取他的值

alert(document.getElementById('test').value)

我会正确地获取新值。但是，如果我通过 chrome 开发人员工具(或 Firebug 或任何您喜欢的工具)检查该元素，我会看到与开始时相同的“Hello world”字符串。

这两个哪个是正确的？ js 值还是 chrome 检查器？

这是 Example Fiddle这是一个截图

我在尝试解决这个问题时想到了这个:经典商店情况，我有一个带有 X inputs 标签的表格，用户可以在其中输入 X 件商品的数量。我需要检查一个或多个值自每个输入的前一个值以来是否发生了变化:如果 OLD 和 NEW val 之间的比较返回值已发生变化，我需要更新订单。否则无需保存/更新。

我以为我可以使用 attr。 “value”存储输入的“旧”值，但可能不是最佳选择..

谁能解释这种行为？这只是一个“刷新”问题还是背后有其他问题？

Answer 1

两者都是对的，它们只是表现出不同的东西。

DOM value property 为您提供current 值。

HTML value attribute 为您提供default 值(与 DOM defaultValue 属性(property))。

Chrome DOM 检查器在 HTML View 中显示属性值。您必须查看属性 View 才能看到属性值。