jQuery .attr('value', 'new_value')不起作用？

Question

我正在尝试使用jQuery动态更改输入框的实际HTML value属性。虽然使用input.attr('value', 'myNewVal');可以在视觉上更改它，但是当我使用Chrome开发者工具检查源代码时，HTML属性并没有改变。

由于我稍后要在一些PHP中检查输入框是否具有其原始值，因此我需要一种方法来更改实际的HTML属性，最好是使用jQuery。有没有其他人遇到过这个令人恼火的错误，并且您们中的任何人知道解决方法？

我也尝试了.val()，但情况相同-底层HTML属性未更改。

- BenM

---

你尝试提交表单并检查 PHP 返回了什么吗？ - sdleihssirhc

你看不到HTML的变化并不影响你所做的更改已经完成了。 - Jon

Answer 1

attr 应该也可以正常工作，特别是因为你确实看到它改变了，但是也尝试使用 val - 它更适合于改变值：

input.val('myNewVal');

一定不要使用"查看源代码"命令，它会重新加载页面或显示页面加载后的内容。而是使用DOM查看器-右键单击输入元素并选择"检查元素"。（在Windows Chrome中，这与"开发工具"-Ctrl+Shift+I相同）

- Kobi

---

一定要使用.val()。jQuery在这方面提供了很好的服务，提供了一个通用的接口，例如文本区域和输入框。我记得在与IE相关的.attr('value')中存在一些错误。.val()也会处理这个问题。 - skarmats

这并没有回答问题：值已经成功更改。是“工具显示的标记”没有更新。 - Jon

@Jon - 希望现在好一些了，我正在努力。 - Kobi

不使用查看源代码的绝佳提示 - Brendan

@Mooncrater - 明白了，很高兴它能够解决问题。我也会删除我的评论。谢谢！ - Kobi

Answer 2

attr()和val()都是与value属性相关的，而不是属性本身。在jQuery 1.6之前，这一点是正确的，但自从引入了prop()之后，就不再正确了。 value属性只指定输入的初始值。一旦输入框中的实际文本发生改变（无论是通过用户输入还是脚本），value属性和属性操作完全独立。在几乎所有情况下，这并不重要，因为您几乎总是想要当前值（并且正是该值被提交到服务器）。

如果您真的必须更改实际属性（我非常确定您不需要这样做），请通过setAttribute()进行更改。

input[0].setAttribute('value', 'myNewVal');

请注意，IE<8的浏览器（包括IE 8的兼容模式）对于将属性映射到属性的getAttribute()和setAttribute()支持不佳，因此以上内容在这些浏览器中不适用。

- Tim Down

---

整个概念听起来非常逆向思维。我的意思是，自从点击“关闭”按钮导致计算机“重新启动”（相比之下）以来，这种情况何曾发生过？ - Christian

哦，而且，如果开发者工具实际上显示的是旧值，为什么要首先使用它们呢？任何人都可以通过查看页面源代码来查看旧值。这将使整个目的失去意义。 - Christian

@Christian：对我来说，保留当前状态和初始状态的不同值似乎并不不合理，但我同意DOM中实现这一机制的方式并不是很直观。jQuery通过其不幸命名为attr()方法的方式假装这种难以理解的基本差异不存在，这并没有帮助解决问题。 - Tim Down

@Christian：对于文本输入框，您可以通过查看页面来查看当前值 :) - Tim Down

@Tim Down - 哈哈！你抓住我了。无论哪种情况，+1 是为了这个关于属性和特性的小信息；这是我认为从未存在过的东西（或者说更像是一个怪癖而不是事实）。编辑：可以说，输入可能已经被隐藏了（或者它可能是隐藏类型），这又让我们陷入了小困境。 - Christian

Answer 3

使用 .val()。

input.val("some text");

根据您的评论，查看源代码很可能不会更新。如果您仍然得到原始值，则可能还有其他问题，需要更多详细信息。

jsfiddle好处。

- Mark Coleman

---

@Christian，我改正了，我一直以为它是这样的，但我错了。 - Mark Coleman

Answer 4

这不是一个bug。value属性不应该改变。

input控件有点特殊。根据HTML规范，value内容属性给出了input元素的默认值。您可以在DOM资源管理器中查看已通过编程或用户更改的实际控件值。当表单重置时，元素的值将设置为value内容属性的值。（这里有太多的值 :))

这是所有可见输入类型的标准行为。（尝试为隐藏元素设置值，Firefox至少会更新value内容属性）。

- Corneliu

---

+1 @Tim Down: 对于可见的输入控件，当前值在页面上。 - Corneliu

Answer 5

不要使用 .attr() 来改变值，应该使用专门为此目的设计的 .val()：

input.val("new value");

- Alex

Answer 6

这是因为开发者工具没有刷新。这是这些工具中已知的一个bug，包括Opera，Safari以及Firebug（后者是另一个问题）。

据我所知，您可以右键单击源代码树窗口并点击“刷新”。这不会刷新页面，只会刷新源代码视图。然而，在Firebug中这个“修复”不起作用。

- Christian

---

那么你就需要解决两个问题。可以这样做：<button onclick="alert('val='+input.val());">测试</button> - Christian

开发人员工具里的问题并不是一个 bug。jQuery 的 attr() 方法几乎总是改变 属性 而非属性。在 value 的情况下，一旦值已经被更改（通过用户输入或脚本），value 属性和 value 属性将有不同的值。 - Tim Down

我并不完全同意这个说法，即在这4种浏览器中都存在这个常见的bug。当我调试脚本时，我非常依赖Firebug和Chrome，但我从未遇到过任何问题 - 至少在我的经验中，它们总是与DOM一起刷新。 - Kobi

@Kobi - Firebug是一个独立的工具。其他三个主要浏览器共享相同的开发者工具代码库，除了可能是MSIE（不确定）。我在使用快速修改页面元素的jquery时遇到了这个问题。最近可能已经修复了，但肯定存在过。 - Christian

@Christian Sciberras 我可以百分之百自信地保证，微软绝对没有使用 WebKit 开发者工具 :-) - Pointy

Answer 7

它不会改变大多数开发工具中DOM浏览器中的值。但是JavaScript仍然可以获取当前值。所以

var newValue = 'new';
$(sel).val(newValue);
newValue == $(sel).val(); // true

- skarmats

Answer 8

我有一个案例，其中jQuery函数.val()和.attr("value", "...")对于带有URL的值无法正确工作。这些函数会更新用户界面，但不会影响DOM源代码。在这种情况下，应使用：

jQueryObj[0].setAttribute("value", "...");

对于jQuery v1.5.* => v1.6.* 版本，这是正确的。对于其他版本尚未进行检查。

- Anton

Answer 9

开发工具会显示从服务器接收到的源代码（对于value属性），因此您可以看到真正的原始值。

如果您想要更改它（并检查新值），则可以在某个地方存储引用。最好使用.data()方法并根据存储的值进行检查。

但是，为了使用目的（通过JS提交或访问），通过.attr()或.val()方法更改值就足够了。

- Gabriele Petrioli

Answer 10

他们的回复是正确的，告诉你使用 .val("value") 方法。我所知道的唯一查看这些更改（在源代码中）的方法是使用 Firefox Web Developer Plugin 并单击“查看源” -> “查看生成的源”。这显示了 DOM 操作之后的源代码（即调用 .val() 方法之后），在处理修改 DOM 元素的函数/方法时，我经常使用它。

因此，总结一下：[#input_id = 输入字段的 ID]

$("#input_id").val("new value");

然后使用插件查看生成的源代码，您将看到更新后的值。

- niczak