我正在为Google Chrome开发扩展程序，但遇到了一个难题。
我需要在单击弹出窗口中的readonly textarea时将其内容复制到剪贴板中。有没有人知道使用纯JavaScript且不使用Flash的最佳方法？如果可以的话，我也加载了jQuery库。我的当前（不起作用的）代码是...
function copyHTMLCB() {
$('#lb_html').select();
$('#lb_html').focus();
textRange = document.lb_html_frm.lb_html.createTextRange();
textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");
alert("HTML has been copied to your clipboard."); }
所有功劳归于joelpt，但以防其他人需要在纯JavaScript中工作而没有jQuery（就像我一样），这是他解决方案的一个适应：
function copyTextToClipboard(text) {
//Create a textbox field where we can insert text to.
var copyFrom = document.createElement("textarea");
//Set the text content to be the text you wished to copy.
copyFrom.textContent = text;
//Append the textbox field into the body as a child.
//"execCommand()" only works when there exists selected text, and the text is inside
//document.body (meaning the text is part of a valid rendered HTML element).
document.body.appendChild(copyFrom);
//Select all the text!
copyFrom.select();
//Execute command
document.execCommand('copy');
//(Optional) De-select the text using blur().
copyFrom.blur();
//Remove the textbox field from the document.body, so no other JavaScript nor
//other elements can get access to this.
document.body.removeChild(copyFrom);
}
我发现以下方法最好，因为它允许您指定复制数据的MIME类型：
copy: function(str, mimeType) {
document.oncopy = function(event) {
event.clipboardData.setData(mimeType, str);
event.preventDefault();
};
document.execCommand("copy", false, null);
}
我正在使用这个简单的函数把任何给定的纯文本复制到剪贴板（仅在Chrome浏览器中使用，需要jQuery）：
// Copy provided text to the clipboard.
function copyTextToClipboard(text) {
var copyFrom = $('<textarea/>');
copyFrom.text(text);
$('body').append(copyFrom);
copyFrom.select();
document.execCommand('copy');
copyFrom.remove();
}
// Usage example
copyTextToClipboard('This text will be copied to the clipboard.');
由于快速的附加-选择-复制-删除序列，似乎没有必要隐藏文本区域或给它任何特定的CSS/属性。至少在我的电脑上，在非常大的文本块被移除之前，Chrome甚至不会将其呈现到屏幕上。
请注意，这仅适用于Chrome扩展/应用程序。如果您使用的是v2 manifest.json，则应在其中声明“clipboardWrite”权限；这对于应用程序是强制性的，并建议为扩展使用。
剪贴板 API现在已经被 Chrome 支持，并且旨在替代 document.execCommand。
来自 MDN：
navigator.clipboard.writeText(text).then(() => {
//clipboard successfully set
}, () => {
//clipboard write failed, use fallback
});
clipboardRead和clipboardWrite的地方。 - tom_mai78101execCommand("Copy")复制只读文本，它必须是可编辑的文本区域。解决方案是创建一个文本输入元素，并从那里复制文本。不幸的是，您不能使用display: none或visibility: hidden隐藏该元素，因为这也会阻止选择/复制命令的工作。但是，您可以使用负边距“隐藏”它。这是我在Chrome扩展程序弹出窗口中获取短网址时所做的事情。这是重写带有shorturl的弹出窗口的代码部分（快速且脏的方法;-)）：document.body.innerHTML = '<p><a href="'+shortlink+'" target="_blank" >'+shortlink+'</a><form style="margin-top: -35px; margin-left: -500px;"><input type="text" id="shortlink" value="'+shortlink+'"></form></p>'
document.getElementById("shortlink").select()
document.execCommand("Copy")
只有这个对我起作用。
我认为 document.execCommand 在 Chrome 中根本不起作用。
我在代码中保留了 execCommand，但可能只是因为一个简单的原因：让这个东西存在 :)
我浪费了很多时间在上面，而没有查看我的旧笔记。
function copy(str, mimeType) {
document.oncopy = function(event) {
event.clipboardData.setData(mimeType, str);
event.preventDefault();
};
try{
var successful = document.execCommand('copy', false, null);
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
if (!successful){
navigator.clipboard.writeText(str).then(
function() {
console.log('successful')
},
function() {
console.log('unsuccessful')
}
);
}
}catch(ex){console.log('Wow! Clipboard Exeption.\n'+ex)}
}
我在某处读到，Javascript存在安全限制，阻止你与操作系统进行交互。我以前使用过ZeroClipboard（http://code.google.com/p/zeroclipboard/），效果很好，但它确实使用了Flash。Bitly网站非常有效地使用了它：http://bit.ly/。
let content = document.getElementById("con");
content.select();
document.execCommand("copy");
<textarea id="text-to-copy">This is the text I want to copy</textarea>
<span id="span-text-to-copy">This is the text I want to copy</span>
JavaScript：
let textElement = document.getElementById("text-to-copy");
//remove selection of text before copying. We can also call this after copying
window.getSelection().removeAllRanges();
//create a Range object
let range = document.createRange();
//set the Range to contain a text node.
range.selectNode(textElement);
//Select the text node
window.getSelection().addRange(range);
try {
//copy text
document.execCommand('copy');
} catch(err) {
console.log("Not able to copy ");
}
let elementSpan = document.getElementById("span-text-to-copy");
let textNode = elementSpan.childNodes[0];
document.body而是要用var body = document.getElementsByTagName('body')[0];呢？ - jscripterdocument.body.removeChild(copyFrom)？而不是用copyFrom.remove()呢？这样做不更容易吗？ - Shayan