HTML输入值属性 - 相同的输入，（显然）不同的结果

Question

在通过输入框进行编辑后，value属性如何适用于html输入标记？

示例：

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

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

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

我会正确地获得新值。 但是如果我通过chrome开发工具（或者firebug或你喜欢的任何东西）检查元素，我会看到与开头一样的“Hello world”字符串..

两者中哪一个是正确的？ js值或铬检验员？

以下是Example Fiddle，此处是截屏

我在尝试找到这个问题的解决方案时遇到了这个问题：经典的商店情况，我有一个带X输入标签的表，用户可以输入X项的数量。我需要检查自每个输入的前一个值以来一个或多个值是否已更改：如果OLD和NEW val之间的比较返回值已更改，我需要更新顺序。否则无需保存/更新。

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

任何人都可以解释这种行为吗？这只是一个“刷新”的问题还是还有别的东西？

Answer 1

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

DOM value 属性为您提供当前值。

HTML value 属性为您提供默认值（与DOM defaultValue 属性相同）

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

Answer 2

您可以在此article中找到相关信息。

在html中看到的值是表单加载的默认值。如果你想要更新DOM，那么你必须使用ele.setAttribute（“value”，“new value”）

如果您想知道元素是否已更改，最好将onchange事件附加到输入元素，并在更改处理程序中标记一些标志以了解表单是否更改。

Answer 3

您可以为输入分配所谓的专有属性;例如“oldval”，以便您稍后可以将其与当前值进行比较