jQuery .val更改不会更改输入值

Question

我有一个HTML输入框，其中value值包含一个链接。

<input type = 'text' value = 'http://www.link.com' id = 'link' />

我正在使用jQuery在特定事件上更改值。

$('#link').val('new value');

以上代码改变了文本框的值，但并不改变代码中的值（value = 'http://www.link.com'保持不变）。我还需要将value=''的值也进行更改。

- Lukas

---

使用Chrome的检查元素。 - Lukas

@Luke 值会改变，但在Chrome的检查器中，HTML元素的可见值不会改变。尝试弹出该值或将其输出到控制台中，您将看到它已经改变了。请参见，已经改变：http://jsfiddle.net/a8SxF/ - TheZ

是的，我现在看到了。我正在使用zClip将值复制到剪贴板，但它在更改后复制旧值。我认为我可以通过一些小的调整来解决它。 - Lukas

可能是重复的问题：当输入值改变时，html()方法出现错误。 - Esailija

改变表单元素的内部状态不会反映在源代码中。 - Felix Kling

Answer 1

使用attr代替。
$('#link').attr('value', 'new value');

演示

- Ricardo Alvaro Lohmann

---

使用setAttribute或jQuery的attr是完全正确的，这将影响DOM元素的值：http://jsfiddle.net/a8SxF/1/。 - TheZ

@TheZ 这是因为输入的脏值标志是false。尝试与输入进行交互（在用户输入后该值变为脏值），然后使用setAttribute设置。 - Esailija

дҪҶжҳҜеҪ“дҪ дҪҝз”Ё.html()жқҘиҺ·еҸ–HTMLж—¶пјҢж— и®әдҪ дҪҝз”Ё.val('new value')иҝҳжҳҜattr('value', 'new value')жқҘдҝ®ж”№еҖјпјҢеҺҹжқҘзҡ„ж—§еҖјд»Қ然еӯҳеңЁ... :( - Legionar

使用.val编写了一大堆复杂的函数（正如之前阅读的所有内容所建议的），但出现了完全相同的问题。真是令人恼火！这个答案应该是任何想要动态更新表单元素的jQuery新手的首选。如果我最初阅读了这个答案，就能节省好几个小时的时间！ - Grant

这就是为什么使用JavaScript/JQuery很难一开始就做到得心应手的原因，有很多这样的注意点。这对我帮助很大，谢谢！ - eaglei22

Answer 2

改变值属性不会改变defaultValue。在使用.html()或innerHTML检索的代码中，value属性将包含defaultValue，而不是value属性。

- Kevin B

---

这就解释了。输入也不会改变<input id='a' value>，但会影响$("#a").val()的结果。只是为了确认一个问题：$("#a").val(value)真的是更改输入元素值的正确方式，以便提交正确的值吗？ - Daniel Katz

是的，没错。更改属性不会改变提交的内容。 - Kevin B

Answer 3

要扩展一下Ricardo的回答：https://dev59.com/J2ct5IYBdhLWcg3wuPu6#11873775 关于val()方法：

通过该方法设置值（或使用本机value属性）不会触发change事件。因此，相关的事件处理程序不会被执行。如果您想执行它们，应在设置值后调用.trigger("change")。

参考链接：http://api.jquery.com/val/#val2

- Landan Jackson

Answer 4

$('#link').prop('value', 'new value');

解释： Attr在jQuery 1.6下有效，但自jQuery 1.6.1以来情况有所改变。在大多数情况下，prop()执行attr()曾经执行的操作。用prop()替换代码中的attr()调用通常是有效的。Attr会给出元素在页面加载时在html中定义的值，而prop则提供被jQuery修改后元素的更新值。

- Raul

---

尝试解释你的答案。 - Vinoth Krishnan

Answer 5

对我来说，问题在于更改此字段的值无效：

$('#cardNumber').val(maskNumber);

以上解决方案都没有对我起作用，所以我进一步调查发现：

根据DOM Level 2 Event规范： 当控件失去输入焦点并且其值自获取焦点以来已被修改时，将触发更改事件。 这意味着更改事件旨在由用户交互触发。编程更改不会导致此事件被触发。

解决方案是添加触发器函数，并使其触发更改事件，如下所示：

$('#cardNumber').val(maskNumber).trigger('change');

- Ivan Jancic

Answer 6

这只是我遇到的一种可能情况。如果能帮助到别人就太好了：我写了一个复杂的应用程序，其中在代码的某个地方我使用了一个函数来清除所有文本框的值，然后再显示它们。后来有一次，我试图使用jquery val('value') 来设置文本框的值，但我没有注意到紧接着我调用了ClearAllInputs方法.. 所以，这也有可能发生。

- amira

Answer 7

我遇到的类似问题是由于选择器中有特殊字符（例如句点）。

解决方法是转义这些特殊字符：

$("#dots\\.er\\.bad").val("mmmk");

- WiredIn

---

同意，非常糟糕，你不应该逃避，你应该重新命名你的元素ID。 - webaholik

点号是有效的选择器，但如果您要引用类（'.class-name'），则在名称中嵌套点号是一个不好的想法，因为这将尝试查找其他类/ID。例如，$('.div.name')将查找具有.div和.name作为类的div。 - Andrew West

Answer 8

请注意，浏览器会解析HTML标签元素，并创建相应的DOM节点对象。

• 输入的初始/起始/默认值：
  • 等于：
    • input 的 HTML 标签元素中 value 属性的初始值
    • input 的 DOM 节点对象的 defaultValue 属性
  • 通过 jQuery 设置：
    • $(input).attr("value", "42")
• 输入的当前值：
  • 等于：
    • input 的 HTML 标签元素中 value 属性的当前值
    • input 的 DOM 节点对象的 value 属性
  • 通过 jQuery 设置：
    • $(input).val("42")
    • $(input).prop("value", "42")

另请参阅：HTML中属性和特性的区别是什么？

- user2340939

Answer 9

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>

- ikerya

---

是的，这并不会更新实际值。它只会更新屏幕上的文本框，但当您尝试提交表单时，该值仍然是页面最初加载时的值。 - Grant