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

Question

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

例:

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

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

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

我会正确地获得新值.但是如果我通过chrome开发人员工具(或者萤火虫或你喜欢的任何东西)检查元素,我会看到与开头一样的"Hello world"字符串.

哪两个是正确的？js值或铬检查员？

这是示例小提琴,这是一个截图

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

我以为我可以使用attr."值"存储输入的"旧"值,但可能不是最佳选择..

谁能解释这种行为？这只是一个"刷新"问题还是还有别的东西？

Answer 1

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

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

HTML value 属性为您提供默认值(与DOM defaultValue 属性相同).

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

Answer 2

您可以在本文中找到相关信息.

在html中看到的值是表单加载的默认值.如果你想要更新DOM,那么你必须使用ele.setAttribute("value","new value")

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