我该如何将一个div中的文本复制到剪贴板？我有一个div，需要添加一个链接，以将文本添加到剪贴板。这个问题有解决方案吗？
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
我点击复制文本后，再按Ctrl + V，就可以粘贴。
2020年更新：此解决方案使用
execCommand。虽然在撰写本答案时该功能很好，但现在已被视为过时。它仍将在许多浏览器上工作，但不建议使用，因为支持可能会被放弃。
除了Clipboard API（在jfriend00的回答中提到）之外，还有另一种非Flash方式。您需要选择文本，然后执行命令copy，以将当前在页面上选定的任何文本复制到剪贴板上。
例如，此函数将把传递元素的内容复制到剪贴板中（根据PointZeroTwo在评论中的建议进行更新）：
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
document.execCommand("copy")。$(element).text().trim()修剪文本。function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />主要问题在于目前并非所有的浏览器都支持这个功能，但您可以在以下主要浏览器上使用：
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />document.execCommand('SelectAll')而不是使用.select()（如聊天和下面的评论所指定）来解决该问题，而该解决方案也奏效了。正如用户在西班牙版StackOverflow上指出的那样，如果您想要逐字复制元素的内容，则上面列出的解决方案完美地工作，但如果您想要带格式粘贴已复制的文本（因为它被复制到了一个input type="text"中，所以格式会丢失），则效果不佳。
解决方案是将其复制到可编辑的div中，然后使用类似的方式使用execCommand进行复制。这里有一个示例-单击复制按钮，然后粘贴到下面的可编辑框中：
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}#target {
width:400px;
height:100px;
border:1px solid #ccc;
}<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>而在jQuery中，它会像这样：
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}#target {
width:400px;
height:100px;
border:1px solid #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>aux.style.position = "fixed";
aux.style.top = 0;
在appendChild调用之前加入这些行。 - ariscris2016年更新：
截至2016年，现在大多数浏览器都能够使用document.execCommand("copy")将文字复制到剪贴板，因为大多数浏览器有编程能力，可以根据选定内容编程地将文本复制到剪贴板。
与浏览器中的其他操作（如打开新窗口）一样，只能通过特定的用户操作（如鼠标单击）才能完成剪贴板复制。例如，不能通过计时器等方式来完成。
以下是一个代码示例：
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}input {
width: 400px;
}<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">这是一个稍微高级一些的演示：https://jsfiddle.net/jfriend00/v9g1x0o6/
而且，你也可以使用预先构建的库clipboard.js来为你完成此操作。
旧的、历史性的回答部分
由于安全原因，任何现代浏览器都不允许通过JavaScript直接复制到剪贴板。最常见的解决方法是使用Flash功能来复制到剪贴板，只有通过直接用户点击才能触发。
如前所述，ZeroClipboard是一个流行的代码集，用于管理Flash对象进行复制。我已经使用过它。如果在浏览设备上安装了Flash（这排除了移动设备或平板电脑），它可以正常工作。
这些问题询问关于使用Flash的现代替代方案，已经得到了很多赞同，并且没有提供解决方案的答案（可能是因为不存在）：
Internet Explorer和Firefox曾经拥有非标准的API用于访问剪贴板，但它们更现代化的版本已经弃用了这些方法（可能是出于安全原因）。
有一个初步的标准努力正在进行，试图找到一种“安全”的方式来解决最常见的剪贴板问题（可能需要像Flash解决方案那样的特定用户操作），看起来最新版本的Firefox和Chrome可能已经部分实现了这个努力，但我还没有确认。
document.execCommand("copy")，可以依靠它来使用。因此，我正在努力保持我的答案最新（最初是在将近两年前编写的）。我们仍然没有可靠的 Safari 解决方案，除了预先选择文本并告诉用户手动按 Ctrl+C，但至少在其他地方正在取得进展。 - jfriend00document.execCommand("copy")，因此这段代码现在应该可以在Safari 10中正常工作。 - jfriend00onclick="navigator.clipboard.writeText($(this).text());" - stomtech更新：现在正确的方式是使用Clipboard API。
例如：
// get the text from the DOM Element:
const textToCopy = document.querySelector('.content').innerText
// when someone clicks on the <a class="copy-text"> element
// (which should be a <button>), execute the copy command:
document.querySelector('.copy-text').addEventListener('click' , ()=> {
navigator.clipboard.writeText(textToCopy).then(
function() {
/* clipboard successfully set */
window.alert('Success! The text was copied to your clipboard')
},
function() {
/* clipboard write failed */
window.alert('Opps! Your browser does not support the Clipboard API')
}
)
})
就这些。
如果您想在 Clipboard API 推出之前查看解决方案（现今不是一个好的实践方式）：
$('button.copyButton').click(function(){
$(this).siblings('input.linkToCopy').select();
document.execCommand("copy");
});
<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />
clipboard.js是一个很好的实用程序，可以在没有使用Flash的情况下复制文本或HTML数据到剪贴板。它非常易于使用;只需包含.js文件并使用类似于此的内容：
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
2016年1月15日更新： 最佳答案 今天进行了编辑，以引用我在2015年8月发布的答案中相同的API。先前的文本指导用户使用 ZeroClipboard。只是想明确一下，我没有从 jfriend00 的答案中拿走这个，而是相反的情况。
带有换行符（Alvaro Montoro回答的扩展部分）
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
没有使用Flash或其他要求，更好的方法是clipboard.js。你只需要在任何按钮上添加data-clipboard-target="#toCopyElement"，初始化new Clipboard('.btn');，它就会将具有id toCopyElement的DOM内容复制到剪贴板中。这是一个代码片段，通过链接复制提供的问题文本。
不过，它有一个限制，即它不能在Safari上使用，但它在所有其他浏览器（包括移动浏览器）上工作，因为它不使用Flash。
$(function(){
new Clipboard('.copy-text');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a><div class="form-group">
<label class="font-normal MyText">MyText to copy</label>
<button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>
$(".btnCopy").click(function () {
var element = $(this).attr("data");
copyToClipboard($('.' + element));
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
jQuery简单解决方案。
应该由用户的点击触发。
$("<textarea/>").appendTo("body").val(text).select().each(function () {
document.execCommand('copy');
}).remove();
<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
Copy Input Value
</button>
针对这个HTML代码，我们必须使用以下的JQuery代码：
function copyToClipboard(element) {
$(element).select();
document.execCommand("copy");
}
这是该问题的最简解决方案。