Question

我正在为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."); }

Answer 1

我发现以下效果最好，因为它允许您指定复制数据的MIME类型：

copy: function(str, mimeType) {
  document.oncopy = function(event) {
    event.clipboardData.setData(mimeType, str);
    event.preventDefault();
  };
  document.execCommand("copy", false, null);
}

Answer 2

所有的功劳都归功于joelpt，但是如果其他人需要这个在没有jQuery的纯javascript中工作（我做过），这里是他的解决方案的改编：

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);
}

Answer 3

我正在使用这个简单的函数将任何给定的明文复制到剪贴板（仅限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.');

由于快速附加 - 选择 - 复制 - 删除序列，似乎没有必要隐藏textarea或给它任何特定的CSS /属性。至少在我的机器上，即使使用非常大的文本块，Chrome也无法在删除之前将其呈现为屏幕。

请注意，这只会在Chrome扩展程序/应用中运行。如果您使用的是v2 manifest.json，那么您应该在那里声明'clipboardWrite'权限;这对于应用是强制性的，建议用于扩展。

Answer 4

Chrome现在支持Clipboard API，旨在取代document.execCommand。

来自MDN：

navigator.clipboard.writeText(text).then(() => {
    //clipboard successfully set
}, () => {
    //clipboard write failed, use fallback
});

Answer 5

您可以使用Experimental Clipboard API复制到剪贴板，但它只能在浏览器的dev分支中使用，默认情况下不启用（more info）..

Answer 6

您无法使用execCommand("Copy")复制只读文本位，它必须是可编辑的文本区域。解决方案是创建一个文本输入元素并从那里复制文本。遗憾的是，您无法使用display: none或visibility: hidden隐藏该元素，因为这也会阻止select / copy命令工作。但是，您可以使用负边距“隐藏”它。这是我在Chrome Extension弹出窗口中所做的，它获取了一个简短的URL。这是使用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")

Answer 7

我在某处读到Javascript存在安全限制，阻止您与操作系统交互。我在过去使用ZeroClipboard取得了很好的成功（http://code.google.com/p/zeroclipboard/），但确实使用了Flash。 Bitly网站非常有效地使用它：http://bit.ly/

Answer 8

我遇到了类似的问题，我不得不仅使用javascript从元素中复制文本。我会在这里为感兴趣的人添加解决方案。此解决方案适用于许多HTML元素，包括textarea。

HTML：

    <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 ");
}

请注意，如果您想复制span元素，那么您可以获取其文本节点并将其用作range.selectNode（）的参数来选择该文本：

let elementSpan = document.getElementById("span-text-to-copy");
let textNode = elementSpan.childNodes[0];

Answer 9

let content = document.getElementById("con");
content.select();
document.execCommand("copy");

以上代码在每种情况下都可以正常工作。只需确保您要从中获取内容的字段应该是可编辑字段，例如输入字段即可。

Answer 10

只有这个对我有用。

在我看来，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)}
    }

复制到Chrome扩展程序中的剪贴板

10 个答案: