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

【问题标题】：jQuery .val change doesn't change input valuejQuery .val 更改不会更改输入值
【发布时间】：2012-08-08 21:50:20
【问题描述】：

我有一个 HTML 输入，值中有一个链接。

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

我正在使用 jQuery 来更改某个事件的值。

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

上面的代码改变了文本框的值，但没有改变代码中的值（value = 'http://www.link.com' 保持不变）。我也需要改变 value = ''。

【问题讨论】：

in the code 是什么意思？您是否正在查看页面的原始（因此，未修改）源？
使用 Chrome 的检查元素。
@Luke 值会改变，但 HTML 元素在 Chrome 的检查器中的可见值不会改变。然后尝试提醒该值或将其输出到控制台，您会看到它已更改。看，它变了：jsfiddle.net/a8SxF
是的，我现在看到了。我正在使用 zClip 将值复制到剪贴板，但它在旧值更改后复制它。我想我可以通过一些混乱来解决它。
html() method wrong when input value has changed的可能重复

标签： javascript jquery

【解决方案1】：

请改用attr。
$('#link').attr('value', 'new value');

demo

【讨论】：

这是完全正确的，通过使用setAttribute 或jQuery 的attr 你也会影响DOM 元素的值：jsfiddle.net/a8SxF/1
@TheZ 那是因为输入的脏值标志是假的。尝试与输入交互（用户输入后值是脏的），然后 setAttribute
但是当你想用.html()获取html时，还是会有原来的值，没关系，如果你用.val('new value')或者attr('value', 'new value')... :(跨度>
使用 .val 编写了大量复杂的函数（正如我之前阅读的所有内容所建议的那样）并且遇到了完全相同的问题。烦死人了！这个答案应该是任何希望动态更新表单元素的 jQuery 新手的第一选择。如果我先读到这篇文章，会为我节省好几个小时！
这就是为什么使用 JavaScript/JQuery 很难落地的原因，有很多这样的警告。这对我帮助很大。谢谢！

【解决方案2】：

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

【讨论】：

这就解释了。键入也不会更改，但会影响 $("#a").val() 的结果。一个要确定的问题：$("#a").val(value) 真的是如何更改输入元素的值的正确方法，以便提交正确的值吗？
是的，没错。更改属性不会更改正在提交的内容。

【解决方案3】：

稍微扩展一下里卡多的回答：https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

关于 val()

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

【讨论】：

【解决方案4】：

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

说明： Attr 将在 jQuery 1.6 上工作，但从 jQuery 1.6.1 开始，情况发生了变化。在大多数情况下， prop() 执行 attr() 过去所做的事情。在您的代码中用 prop() 替换对 attr() 的调用通常会起作用。 Attr 将为您提供在页面加载时在 html 中定义的元素值，而 prop 提供通过 jQuery 修改的元素的更新值。

【讨论】：

试着解释你的答案

【解决方案5】：

这只是发生在我身上的一个可能场景。好吧，如果它对某人有帮助，那就太好了：我编写了一个复杂的应用程序，在代码的某处我使用了一个函数来清除所有文本框的值，然后再显示它们。一段时间后，我尝试使用 jquery val('value') 设置文本框值，但我没有注意到在那之后我调用了 ClearAllInputs 方法。所以，这也可能发生。

【讨论】：

【解决方案6】：

我的类似问题是由选择器中的特殊字符（例如句点）引起的。

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

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

【讨论】：

同意，非常糟糕，你不应该逃跑，你应该重命名你的元素的 id。

【解决方案7】：

对我来说，问题是更改此字段的值不起作用：

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

以上解决方案都不适合我，所以我进一步调查发现：

根据 DOM Level 2 事件规范：当控件失去输入焦点并且其值在获得焦点后已被修改时，会发生更改事件。这意味着更改事件旨在通过用户交互触发更改。程序化更改不会触发此事件。

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

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

【讨论】：

【解决方案8】：

<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'>

【讨论】：

是的，但这并没有更新实际值。它会更新屏幕上的文本框，但是当您尝试提交表单时，该值与页面最初加载时的值相同。