8

通过输入框编辑后，值属性如何作用于 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 检查器？

这是示例小提琴，这是屏幕截图在此处输入图像描述

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

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

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

4

3 回答 3

9

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

DOMvalue 属性为您提供当前值。

HTMLvalue 属性为您提供默认值（与 DOMdefaultValue 属性相同）。

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

Chrome 属性视图的屏幕截图

于 2013-02-15T09:35:50.023 回答
5

您可以在本文中找到信息。

在 html 中看到的值是表单加载的默认值。如果您希望 DOM 也更新，那么您必须使用 ele.setAttribute("value", "new value")

如果你想知道一个元素是否发生了变化，最好的方法是在输入元素上附加一个 onchange 事件，并在更改处理程序中标记一些标志，以了解表单是否发生了变化。

于 2013-02-15T09:42:20.657 回答
1

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

于 2013-02-15T09:39:58.023 回答