Question

我想要一个按钮，选择textarea中的文本并将其复制到剪贴板。我似乎找不到任何适用于所有浏览器的解决方案，也不使用闪存。

当然这是可行的吗？我已经看到了它的所有地方，但我猜他们使用闪光灯，我真的想尽可能远离，因为有些人没有它。

这是我到目前为止 - 它只选择文字：

function copyCode() {
  $("#output-code").focus();
  $("#output-code").select();
}

（重点不是绝对必要的）

Answer 1

的execCommand（＆＃39;复印＆＃39）

有一个非常新的选择。它是跨浏览器，但每个人都更新浏览器需要时间。

它使用document.execCommand('copy');函数。使用此功能，您可以复制选择的文本。这不仅适用于textarea，还适用于网页上的所有选定文字（例如span，p，div等。）

适用于Internet Explorer 10 +，Chrome 43 +，Opera 29+和Firefox 41+（请参阅execCommand兼容性here）。

实施例

＆＃13;

// Setup the variables
var textarea = document.getElementById("textarea");
var answer  = document.getElementById("copyAnswer");
var copy    = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand('copy');

       if (ok) answer.innerHTML = 'Copied!';
       else    answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});

＆＃13;

<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>

＆＃13;

Answer 2

您必须使用不想使用的Flash加载项自动将文本复制到客户端的剪贴板。在没有active-x组件的帮助下自动修改客户端剪贴板的网站是一个安全问题。请注意，active-x组件是在用户计算机上运行的程序，从技术上讲，需要安装用户的同意。考虑到剪贴板是一个操作系统组件，请高兴的是，Web浏览器默认情况下不允许网站劫持它。

如果用户没有Flash，禁用Flash或禁用了active-x，那么他或她可能对安全性感到偏执，并且不想让你弄乱他或她的键盘。此时，用户将习惯于在网站中没有太多自动或基于脚本的功能。最好不要试图公开违背最终用户的意愿。

请参阅以下Stack Overflow链接：

How do I copy to the clipboard in JavaScript?
Cross Browser Flash Detection in Javascript

最终的答案是使用Zero Clipboard，这是一个使用小型隐形Flash电影和JavaScript来使用剪贴板功能的库，就像你想要的那样。该库可在此处获取：https://github.com/zeroclipboard/zeroclipboard第二个链接显示如何检测Flash是否已禁用，这样可以显示类似于JavaScript的警告消息。

Answer 3

现在我们已经通过@zenorocha

获得了Clipboard.js

要使用它，请下载并调用page.html上的脚本（或使用bower或npm安装）

<script src="path_to_script/clipboard.min.js"></script>

在script.js上实例化一个新触发器

new Clipboard('.trigger');

然后去那里看一些使用示例：http://zenorocha.github.io/clipboard.js/#usage

Answer 4

function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = '2em';
    textArea.style.height = '2em'; 
    textArea.style.padding = 0;  
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';   
    textArea.style.background = 'transparent';
    textArea.value = text;
    textArea.id = 'ta';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
         alert('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
    return successful;
}

我希望这是有帮助的

Answer 5

这是一个相当晚的响应，但对于那些将来搜索并且无法实现execCommand（'copy'）事件以适用于桌面和移动设备的人。

跨浏览器，移动设备友好且无需外部来源或程序

function CopyString(){
    var StringToCopyElement = document.getElementById('YourId');
    StringToCopyElement.select();

    if(document.execCommand('copy')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById("YourId").selectionStart = 0;
    document.getElementById("YourId").selectionEnd = 999;
    document.execCommand('copy');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

将CopyString（）函数设置为任何您要触发事件的click事件。这可用于移动和桌面操作系统。

<强>解释

您需要有两种不同的方法来选择要复制的字符串，因为截至今天，通过桌面执行此操作的方法不适用于移动设备。我有一个if then函数来捕获桌面方法是否有效，如果没有，则触发适用于移动设备的代码。此方法不需要下载或链接。两种方法都会突出显示您要复制的文本，然后将复制命令激活到剪贴板，然后取消选择您尝试复制的字符串。您可以根据自己的喜好混合代码，但这是这样做的方式。

将所选文本复制到剪贴板而不使用闪存 - 必须是跨浏览器

5 个答案:

的execCommand（＆＃39;复印＆＃39）

实施例