jQuery .html()不会复制文本区域或输入框的内容

Question

我正在尝试使用elem.html()复制元素的内容，但它不包括inputs或textareas的内容。

以下是一个示例（在框中写入内容，然后单击“复制”）：http://jsfiddle.net/gAMmr/2/ 有没有一种方法可以复制所有信息？

到目前为止，我尝试过以下方法：

• elem.clone() - 不适合我的任务，因为它只复制元素本身。
• elem.children().clone() - 遗漏了文本节点。
• elem.contents().clone() - 不包括textarea的内容。

编辑：每个浏览器的结果似乎都不同。我正在使用Chrome。

- Nick Brunt

---

奇怪的是，在IE8中，它似乎可以很好地复制内容。 - Blazemonger

你需要一个字符串（HTML源代码）还是一个NodeList（DOM节点数组）？ - Šime Vidas

@Nick 是的，看起来 $( textarea ).clone() 不会包括原始TEXTAREA元素中的文本。我会进行调查... - Šime Vidas

@Nick Bug票在这里：http://bugs.jquery.com/ticket/3016 看起来还没有解决方案... - Šime Vidas

Answer 1

$("button").click(function () {
    $("#2").html($("#1").html());
    $("#1").find("input").each(function(idx) {
        $("#2").find("input").eq(idx).val($(this).val());
    });
    $("#1").find("textarea").each(function(idx) {
        $("#2").find("textarea").eq(idx).val($(this).val());
    });
});

http://jsfiddle.net/gAMmr/5/

- Blazemonger

---

我强烈不建议使用 $("#2").html($("#1").html())。相反，可以使用以下代码：$('#1').contents().clone().appendTo('#2'); - Šime Vidas

@Nick $("#2").html($("#1").html()) - 这将序列化（stringify）代表#1子元素的NodeList，然后再将HTML字符串解析回NodeList，以便将这些节点附加到#2元素。这个过程可以比作将数字信号转换为模拟信号，然后再转换回数字信号。你不想这样做。为了避免序列化/反序列化，请克隆元素。 - Šime Vidas

@mblase 不，那不是原因。 在这里阅读为什么它应该被避免。 - Šime Vidas

有意思，我喜欢你去问所有 Stack Overflow 的人如何反驳我。 :-) - Blazemonger

jQuery中的clone()方法还没有修复吗？我不理解https://bugs.jquery.com/ticket/3016。 - basZero

Answer 2

正如Šime Vidas所指出的，这是一个4年历史的错误，尚未被纠正，但存在一种简单的修复方法：

-下载jquery.fix.clone.js
-将其包含在你的页面中：<script src='path/to/jquery.fix.clone.js'></script>

从此以后，克隆的textarea元素应该包含它们源的文本（注意：你需要使用.clone()方法创建新的textarea，而不是.html()方法）。

- Max

Answer 3

输入框不包含HTML，它们有一个value属性。对于表单元素，请使用.val()。

- Diodeus - James MacFarlane

Answer 4

你可以检查一下你想要获取内部文本的元素类型，如果是 input 或者 textarea，就使用 $.text() 而不是 $.html()

- Bassem