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

Question

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

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

这是我到目前为止 - 它只是选择文本:

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

(重点不是绝对必要的)

Answer 1

将execCommand( '复制')

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

它的工作原理是使用该document.execCommand('copy');功能.使用此功能,您将复制选择的文本.这不仅会为工作textarea秒,但与网页上的每一个选择的文本(如在span,p,div等).

适用于Internet Explorer 10 +,Chrome 43 +,Opera 29+和Firefox 41+(请参阅此处的execCommand兼容性).

例

// 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!';
   }
});

<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>
   

Answer 2

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

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

请参阅以下Stack Overflow链接:

1. 如何使用JavaScript复制到剪贴板？
2. Javascript中的跨浏览器Flash检测

最终的答案是使用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;
}

我希望这是有帮助的