如何将文本复制到剪贴板（多浏览器）？
相关：Trello如何访问用户的剪贴板？
当前回答
我的错。这仅适用于Internet Explorer。
这里还有另一种复制文本的方法：
<p>
<a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>
其他回答
我不愿意就此再加一个答案，但我想帮助像我这样的菜鸟，因为这是谷歌排名第一的结果。
在2022年，要将文本复制到剪贴板，您需要使用一行。
navigator.clipboard.writeText(textToCopy);
这将返回一个Promise，如果它复制，则该Promise将被解析，如果失败，则该Promise将被拒绝。
完整的工作功能如下：
async function copyTextToClipboard(textToCopy) {
try {
await navigator.clipboard.writeText(textToCopy);
console.log('copied to clipboard')
} catch (error) {
console.log('failed to copy to clipboard. error=' + error);
}
}
警告！如果您在测试时打开了Chrome开发工具，它将失败，因为浏览器要启用剪贴板，需要将窗口聚焦。这是为了防止随意网站更改剪贴板（如果你不想的话）。开发工具窃取了这一焦点，所以关闭开发工具，你的测试就会成功。
如果您想将其他内容（图像等）复制到剪贴板，请查看这些文档。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
这在浏览器中得到了很好的支持，您可以使用它。如果您担心Firefox，请使用权限查询来显示或隐藏按钮（如果浏览器支持）。https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
这是Chase Seibert答案的扩展，其优点是它适用于IMAGE和TABLE元素，而不仅仅是Internet Explorer 9上的DIV。
if (document.createRange) {
// Internet Explorer 9 and modern browsers
var r = document.createRange();
r.setStartBefore(to_copy);
r.setEndAfter(to_copy);
r.selectNode(to_copy);
var sel = window.getSelection();
sel.addRange(r);
document.execCommand('Copy'); // Does nothing on Firefox
} else {
// Internet Explorer 8 and earlier. This stuff won't work
// on Internet Explorer 9.
// (unless forced into a backward compatibility mode,
// or selecting plain divs, not img or table).
var r = document.body.createTextRange();
r.moveToElementText(to_copy);
r.select()
r.execCommand('Copy');
}
由于Chrome 42+和Firefox 41+现在支持document.execCommand（'copy'）命令，我结合Tim Down的旧答案和Google Developer的答案，创建了两个跨浏览器复制到剪贴板的功能：
函数selectElementContents（el）{//复制textarea、pre、div等。if（document.body.createTextRange）{//Internet Explorervar textRange=document.body.createTextRange（）；text范围.移动到元素文本（el）；text范围.选择（）；textRange.execCommand（“复制”）；}否则如果（window.getSelection&&document.createRange）{//非Internet Explorervar range=document.createRange（）；range.selectNodeContents（el）；var sel=window.getSelection（）；sel.removeAllRanges（）；sel.addRange（范围）；尝试{var success=document.execCommand（'copy'）；var msg=成功？'success'：'不成功'；console.log（'复制命令为'+msg）；}捕获（错误）{console.log（“糟糕，无法复制”）；}}}//结束函数selectElementContents（el）函数make_copy_button（el）{var copy_btn=document.createElement（'input'）；copy_btn.type=“按钮”；el.parentNode.insertBefore（copy_btn，el.nexSibling）；copy_btn.onclick=函数（）{selectElementContents（el）；};if（document.queryCommandSupported（“copy”）||parseInt（navigator.userAgent.match（/Chrom（e|ium）\/（[0-9]+）\./）[2]) >= 42) {//复制适用于Internet Explorer 4+、Chrome 42+、Firefox 41+、Opera 29+copy_btn.value=“复制到剪贴板”；}其他{//仅适用于Safari和旧版Chrome、Firefox和Operacopy_btn.value=“全选（然后按Ctrl+C复制）”；}}/*注意：document.queryCommandSupported（“copy”）在支持复制的浏览器上应返回“true”，但Chrome版本42到47中存在一个错误，使其返回“false”。所以在那些版本的Chrome功能检测不起作用！看见https://code.google.com/p/chromium/issues/detail?id=476508*/make_copy_button（document.getElementById（“标记”））；<pre-id=“markup”>可以通过跨浏览器支持复制或选择的文本。</pre>
复制文本字段内文本的最佳方法。使用navigator.clipboard.writeText。
<input type="text" value="Hello World" id="myId">
<button onclick="myFunction()" >Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myId");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
}
</script>
我找到了以下解决方案：
按下键处理程序创建一个“pre”标记。我们设置要复制到此标记的内容，然后在此标记上进行选择并在处理程序中返回true。这将调用Chrome的标准处理程序并复制选定的文本。
如果需要，您可以为恢复先前选择的函数设置超时。我在MooTools上的实现：
function EnybyClipboard() {
this.saveSelection = false;
this.callback = false;
this.pastedText = false;
this.restoreSelection = function() {
if (this.saveSelection) {
window.getSelection().removeAllRanges();
for (var i = 0; i < this.saveSelection.length; i++) {
window.getSelection().addRange(this.saveSelection[i]);
}
this.saveSelection = false;
}
};
this.copyText = function(text) {
var div = $('special_copy');
if (!div) {
div = new Element('pre', {
'id': 'special_copy',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
}
div.set('text', text);
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
setTimeout(this.restoreSelection.bind(this), 100);
} else return alert('Copy did not work. :(');
};
this.getPastedText = function() {
if (!this.pastedText) alert('Nothing to paste. :(');
return this.pastedText;
};
this.pasteText = function(callback) {
var div = $('special_paste');
if (!div) {
div = new Element('textarea', {
'id': 'special_paste',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
div.addEvent('keyup', function() {
if (this.callback) {
this.pastedText = $('special_paste').get('value');
this.callback.call(null, this.pastedText);
this.callback = false;
this.pastedText = false;
setTimeout(this.restoreSelection.bind(this), 100);
}
}.bind(this));
}
div.set('value', '');
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
div.focus();
this.callback = callback;
} else return alert('Failed to paste. :(');
};
}
用法：
enyby_clip = new EnybyClipboard(); // Init
enyby_clip.copyText('some_text'); // Place this in the Ctrl+C handler and return true;
enyby_clip.pasteText(function callback(pasted_text) {
alert(pasted_text);
}); // Place this in Ctrl+V handler and return true;
在粘贴时，它会创建一个文本区域，并以相同的方式工作。
PS：也许这个解决方案可以用于创建没有Flash的完整跨浏览器解决方案。它适用于Firefox和Chrome。
