使用FireFox,Safari和Chrome将文本复制/放入剪贴板

Question

在Internet Explorer中,我可以使用clipboardData对象来访问剪贴板.我怎样才能在FireFox,Safari和/或Chrome中执行此操作？

Answer 1

出于安全考虑,Firefox不允许您在剪贴板上放置文本.但是,可以使用Flash进行解决方案.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

唯一的缺点是这需要启用Flash.

来源目前已经死亡:http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/(这是谷歌缓存)

Answer 2

现在有一种方法可以在大多数现代浏览器中轻松使用

document.execCommand('copy');

这将复制当前选定的文本.您可以使用选择textArea或输入字段

document.getElementById('myText').select();

要隐形复制文本,您可以快速生成textArea,修改框中的文本,选择它,复制它,然后删除textArea.在大多数情况下,此textArea甚至不会闪烁到屏幕上.

出于安全原因,浏览器只允许您在用户采取某种操作(即单击按钮)时进行复制.一种方法是将onClick事件添加到调用复制文本的方法的html按钮.

一个完整的例子看起来像

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

Answer 3

在线电子表格挂钩Ctrl + C,Ctrl + V事件并将焦点转移到隐藏的TextArea控件,并将其内容设置为所需的新剪贴板内容以进行复制,或在事件完成粘贴后读取其内容.

另请参阅使用Javascript在Firefox,Safari和Chrome中读取剪贴板吗？

Answer 4

这是2015年夏天,围绕Flash发生如此多的动荡,我想我会为这个问题添加一个新的答案,完全避免使用它.

clipboard.js是一个很好的实用程序,允许将文本或html数据复制到剪贴板.它非常容易使用,只需包含.js并使用以下内容:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js也在GitHub上

Answer 5

在2017年你可以做到这一点(说这个,因为这个线程已经快9岁了!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

现在要复制 copyStringToClipboard('Hello World')

如果您注意到该setData行,并想知道您是否可以设置不同的数据类型,答案是肯定的.

Answer 6

Firefox允许您将数据存储在剪贴板中,但由于安全隐患,默认情况下会禁用它.在Mozilla Firefox知识库中的"授予JavaScript对剪贴板的访问权限"中了解如何启用它.

amdfan提供的解决方案是最好的,如果你有很多用户并且不能选择配置他们的浏览器.虽然您可以测试剪贴板是否可用并提供更改设置的链接,但用户是否精通技术.JavaScript编辑器TinyMCE遵循这种方法.

Answer 7

copyIntoClipboard()函数适用于Flash 9,但它似乎被Flash播放器10的版本打破了.这是一个可以与新的Flash播放器配合使用的解决方案:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

这是一个复杂的解决方案,但确实有效.