如何更改输入框 value 属性的 HTML？答案

【问题标题】：How to alter the HTML of the value attribute for an input box?如何更改输入框 value 属性的 HTML？
【发布时间】：2009-09-19 05:41:42
【问题描述】：

我希望能够使用jQuery 更改输入文本框的“值=”。最终目标是使用 .html() 获取表单，因此我拥有所有代码以及输入框中的值。

作为一个例子，我有这个：

<span id="example">
<input type="text" value="" id="rate" />
</span>

如果用户在输入框中输入内容，我可以使用 .val 保存数据，但我想做的是获取 HTML，以便重新显示带有值的输入框。

如果用户在输入中键入“bob”。然后我使用：

var test = $('#example').html();

变量'test'包含以下内容：

<input type="text" value="" id="rate" />

我想要的是：

<input type="text" value="bob" id="rate" />

我如何做到这一点？

【问题讨论】：

Phoenix 有您的答案，您应该查看可用于表单的选择器：docs.jquery.com/Selectors
复制：stackoverflow.com/questions/1388893/…

标签： jquery input

【解决方案1】：

最终目标是使用 .html() 获取表单，因此我拥有所有代码以及输入框中的值。

采用这种策略，您将失败。表单值是与 HTML 属性分开存储的单独数据层。 HTML value 属性反映在对象的 defaultValue 属性中，不是value 属性。

设置表单控件的值或选中/选中状态不会更改 HTML DOM 属性；因此，使用 innerHTML 或 html() 序列化表单不会为您提供表单值 — 由于存在错误，IE 除外。

（IE 中还有其他关于序列化更改名称的表单的错误。避免使用序列化；记住来自value 或val() 的值本身更可靠。）

【讨论】：

我同意这个策略是错误的。我会想出另一种方法，这么简单的方法:)

【解决方案2】：

我相信这个问题与：SO138893: jQuery html() in firefox (uses .innerHTML) ignores DOM changes 重复。那里的答案应该可以解决您的问题。我不认为这个较新的问题应该被删除 - 它可能会帮助其他人找到另一个问题。

【讨论】：

谢谢，我什至不知道这个问题甚至存在......实际上阅读了 OP 问题...... :)
我没有意识到这仅限于浏览器问题。当我在询问之前进行搜索时，甚至没有提出另一个问题。

【解决方案3】：

要更改具有 id rate 的输入元素的值，您可以使用它。

$("#rate").val(newvalue);

将值设置为 bob 使用

$("#rate").val("bob");

【讨论】：

虽然我现在意识到您可能使用的是 Firefox 以外的浏览器（显示此错误） - 这根本不能解决问题：jsbin.com/uniko

【解决方案4】：

我检查了您的代码，它工作正常。唯一缺少的是输入字段的类型。您可以尝试以下方法

$('#example')[0].innerHTML

第二个是

$("#rate")[0].outerHTML

希望这会有所帮助。

【讨论】：

【解决方案5】：

不保存实际的 HTML 而是保存属性怎么样？

var attr = {
'value' : $('#rate').val(),
'type' : $('#rate').attr('type') }
//later on in the code or something:
var inp = $('<input />').attr('id', 'rate').attr(attr);

【讨论】：