至少在 Firefox 中,当在动态或用户更改的文本区域或选择元素上使用 cloneNode(true)
时,value
属性不会保留(也不会保留DOM 改变以反射(reflect)动态变化),而对于输入元素,对 value
属性的更改或用户对属性的更改会反射(reflect)在 DOM 中(因此它会在调用 cloneNode 时保留)。为什么会有这种区别?
更新:
- 我想问的是:规范中是否规定了这种行为? (或在错误报告中详细说明?)
- 样本位于:http://jsfiddle.net/9RSNt/1/
最佳答案
我怀疑差异的出现是因为 textarea
和 select
的值由它们的节点内容决定。修改控件的值会修改它们的 DOM 属性,但不会修改它们的节点内容,因此当您克隆它们时,克隆具有原始元素的值。
您可以通过在更改事件上更新节点内容来解决此问题:
// textarea
$("textarea").change(function() { $(this).text($(this).val()); });
// select
$("select").change(function() {
var sel = $(this).children(":selected");
$(this.children).not(sel).removeAttr("selected");
sel.attr("selected", "selected");
});
编辑:
有许多关于此的 Mozilla 错误案例(有些已解决,有些未解决),但对实际规范的提及很少且相距甚远。看起来 value
属性在 cloneNode()
之后的行为可能是规范中未明确定义的灰色区域。毕竟,cloneNode()
的目的是克隆一个 DOM 节点,而不一定是它的对象状态。
https://bugzilla.mozilla.org/show_bug.cgi?id=197294
https://bugzilla.mozilla.org/show_bug.cgi?id=230307
https://bugzilla.mozilla.org/show_bug.cgi?id=237783
关于javascript - 为什么不像输入元素那样在克隆时选择和文本区域值更改得到更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21059496/