2013-02-15 69 views
5

在通过输入框进行编辑之后,html输入标记的值属性如何工作?HTML输入值属性 - 相同的输入,(显然)不同的结果

例如:

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

这将显示与文本 “Hello World” 的输入框。如果我编辑输入查询一个新的字符串经过渲染的文本(不是通过原始代码),然后尝试使用JS这样

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

我会得到他的价值,正确的,得到了​​新的价值。 但是,如果我通过Chrome开发人员工具(或萤火虫或任何您喜欢的东西)检查元素,我会看到与开始时相同的“Hello world”字符串。

哪两个是正确的一? js价值或铬检查员?

这里的Example Fiddle这里是截图enter image description here

我想出了这个试图找到解决这个问题:经典店的情况,我有X输入标签的表,其中一个用户可以输入X项的数量。我需要检查自每个输入的前一个值以来是否有一个或多个值发生了更改:如果OLD和NEW val之间的比较返回值已更改,则需要更新订单。否则,不需要保存/更新。

我想我可以使用attr。 “价值”来存储“旧”的输入值,但可能并不是最好的选择。

任何人都可以解释这种行为吗?这只是一个“刷新”问题,还是有其他的后面呢?

回答

8

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

的DOM value财产给你当前值。

的HTML value属性给你默认值(等同于DOM defaultValue财产)。

Chrome DOM检查器显示HTML视图中的属性值。您必须查看属性视图以查看属性值。

Screen shot of Chrome property view

1

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

+3

你可以,但是为什么'defaultValue'是免费的呢? – Quentin 2013-02-15 09:41:20

5

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

在html中看到的值是窗体加载的默认值。如果你想DOM也要更新,那么你必须使用ele.setAttribute(“value”,“new value”)

如果你想知道一个元素是否被改变,最好的方法是将一个onchange事件附加到输入元素并在变更处理程序中标记一些标志以确定表单是否更改。

+0

mmm即使我在输入框中输入相同的值,onchange也会启动。我是对的吗? – BeNdErR 2013-02-15 09:54:53

+0

是的。那是对的。 – 2013-02-15 09:56:29

+0

通常在我们的实现中,我们为输入框创建一个简单的类,其中我们用一些值初始化它。该类将负责呈现输入元素,并监听其事件以及何时捕获更改事件,它可以检查该值是否因为缓存初始化值而实际发生更改。如果您认为这会让您的需求变得复杂,那么您可以维护一个数组或值列表,将其映射到输入元素,并且可以根据存储在数组中的值执行检查。无论哪种方式,你将需要一些js操纵 – 2013-02-15 09:59:25

相关问题