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

Posted 2023-05-07

【中文标题】jQuery .html() 不会复制文本区域或输入的内容

【英文标题】：jQuery .html() does not copy contents of textareas or inputs

【发布时间】：2011-11-15 13:20:51

【问题描述】：

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

这是一个示例（尝试在方框中书写，然后单击“复制”）：http://jsfiddle.net/gAMmr/2/

有没有办法复制所有信息？

这些是我迄今为止尝试过的方法：

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

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

【问题讨论】：

奇怪的是，在 IE8 中似乎复制内容就好了。

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

@Nick 是的，$( textarea ).clone() 似乎不包含原始 TEXTAREA 元素中的文本。我会调查...

@Nick Bug 票在这里：bugs.jquery.com/ticket/3016 看来这个问题还是没有解决办法...

【参考方案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/

【讨论】：

@mblase 我强烈反对 $("#2").html($("#1").html())。改为这样做：$('#1').contents().clone().appendTo('#2');

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

@mblase 不，这不是原因。 Read here为什么应该避免它。

Sime：我喜欢你问所有 SO 如何反驳我的方式。 :-)

clone() 还没有在 jQuery 中修复吗？我不明白bugs.jquery.com/ticket/3016

【参考方案2】：

正如Šime Vidas 之前指出的this is a 4-year old bug which hasn't been corrected，尽管存在一个非常容易应用的修复程序：

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

从那时起，克隆的textarea 元素应包含其源文本（注意：您需要使用.clone() 方法来创建新的textarea，而不是.html()）。

【参考方案3】：

输入不包含 HTML，它们有 values。对表单元素使用.val()。

【参考方案4】：

如何检查您尝试从中获取内部文本的元素的类型，如果它是input 或textarea，请使用$.text() 而不是$.html()