如何使用JavaScript复制到剪贴板？

将文本复制到剪贴板的最佳方法是什么？（多浏览器）

我试过了：

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

但是在Internet Explorer中，它会给出语法错误。在Firefox中，它说unsafeWindow is not defined 。

一个没有闪光灯的好技巧： Trello如何访问用户的剪贴板？

#1楼

我发现以下解决方案：

在按下按键时，处理程序会创建“ 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 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('Fail to paste. :(');
     };
   }

用法：

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in 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;

在粘贴时，它会创建textarea并以相同的方式工作。

PS可能是此解决方案，可用于创建不带Flash的完全跨浏览器解决方案。它适用于FF和Chrome。

#2楼

我的错。这仅在IE中有效。

这是复制文本的另一种方法：

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

#3楼

ZeroClipboard是我发现的最好的跨浏览器解决方案：

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

如果您需要iOS的非Flash支持，则只需添加一个备用：

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

#4楼

从Flash 10开始，仅当操作源自用户与Flash对象的交互时，才可以将其复制到剪贴板。（阅读Adobe Flash 10公告中的相关部分）

解决方案是在“复制”按钮上方放置一个Flash对象，或者使用任何可启动复制的元素。零剪贴板目前是使用此实现的最佳库。有经验的Flash开发人员可能只想创建自己的库。

#5楼

我最近写了一篇有关此问题的技术博客文章（我在Lucidchart工作，最近我们对剪贴板进行了大修）。

假设您要在系统复制事件（用户按下Ctrl C或使用浏览器的菜单）期间执行此操作，将纯文本复制到剪贴板相对简单。

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

不在系统复制事件期间将文本放在剪贴板上要困难得多。看起来其中一些其他答案引用了通过Flash进行操作的方法，这是唯一的跨浏览器方法（据我所知）。

除此之外，还有基于浏览器的一些选项。

这是IE中最简单的方法，您可以随时通过以下方式从JavaScript访问剪贴板数据对象：