HTML输入值属性-相同的输入，(显然)不同的结果 [英] HTML input value attribute - same input, (apparently) different results

问题描述

在通过输入框进行编辑后，value属性如何为html输入标签起作用?

How does value attribute work for the html input tag after an edit via the inputbox?

示例:

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

这将显示带有文本"Hello world"的输入框.如果我对其进行编辑，请在呈现的文本框中输入一个新字符串(而不是通过原始代码)，然后尝试使用此类js来获取其值

this will show an input box with the text "Hello world". If I edit it inputing a new string into the rendered textbox (not via raw code), and then try to get his value using js like this

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

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

I'll, correctly, get the NEW value. But if I inspect the element through chrome developer tools (or firebug or anything you prefer), I'll see the same "Hello world" string as it was in the beginning..

两者中的哪一个是正确的?js值还是Chrome检查器?

Which of the two is the right one? js value or chrome inspector?

这是 Example Fiddle ，下面是截图

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

I came up to this while trying to find a solution to this problem: Classic shop situation, I have a table with X inputs tag , where an user can input the quantity of X items. I need to check if one or more values have changed since the previous value of each input: if the comparison between OLD and NEW val returns that the valuehas changed, I need to update the order. Otherwise there's no need to save/update.

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

I thought I could use attr. "value" to store the "old" value of the input, but probably was not the best choice..

有人可以解释这种行为吗?仅仅是刷新"问题，还是还有其他问题?

Can anyone explain this behaviour? It's only a "refresh" problem or is there something else behind?

推荐答案

都是正确的，它们只是显示了不同的内容.

Both are right, they just show different things.

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

The DOM value property gives you the current value.

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

The HTML value attribute gives you the default value (the same as the DOM defaultValue property).

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

The Chrome DOM inspector shows you attribute values in the HTML view. You have to look at the property view to see the property values.

这篇关于HTML输入值属性-相同的输入，(显然)不同的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！