使用 FireFox、Safari 和 Chrome 在剪贴板上复制/放置文本

IT技术 javascript dom clipboard
2021-02-07 19:20:57

在 Internet Explorer 中,我可以使用 clipboardData 对象访问剪贴板。如何在 FireFox、Safari 和/或 Chrome 中执行此操作?

6个回答

出于安全原因,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/(它的Google 缓存也是如此

截至 2015 年 9 月,Flash 正在以相对较快的速度消亡,而 ZeroClipboard 正是基于它的使用。有关不使用 Flash 的解决方案,请参阅我 2015 年 8 月的回答。
2021-03-18 19:20:57
@b1naryatr0phy:大多数情况下是正确的,但 HTML5 仍然没有替代 Flash 当前提供的剪贴板功能(例如使用 ZeroClipboard)。
2021-03-19 19:20:57
截至 2014 年,此方法不再适用于任何现代浏览器。ZeroClipboard是目前唯一解决这个问题的技术
2021-03-25 19:20:57
第三个缺点是它不会在不更改闪存权限的情况下在本地(file://)工作。code.google.com/p/zeroclipboard是围绕此方法构建的库。
2021-04-11 19:20:57

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

document.execCommand('copy');

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

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

隐形复制文本可以快速生成一个textArea,修改框中的文本,选中,复制,然后删除textArea。在大多数情况下,这个 textArea 甚至不会在屏幕上闪烁。

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

一个完整的例子:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

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

另请参阅是否可以使用 JavaScript 在 Firefox、Safari 和 Chrome 中读取剪贴板?.

现在是 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 上

您提供的第一个链接(到 npmjs.com)说它不适用于 IE,但它确实适用(实际上它在 GitHub 上说)
2021-03-18 19:20:57

截至 2017 年,您可以这样做:

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行,并想知道是否可以设置不同的数据类型,那么答案是肯定的。

对于 safari,我需要.select()在调用之前在输入框上运行 a
2021-03-23 19:20:57
您也应该删除事件侦听器吗?
2021-03-25 19:20:57
@ChrisWalsh 是的,它是在代码示例的处理程序中完成的。原因是否则处理程序仍将在内存中。
2021-03-26 19:20:57