使用 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/ （它的Google 缓存也是如此）

Answer 2

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

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>

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 年，您可以这样做：

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/

这是一个复杂的解决方案，但它确实有效。

Answer 8

我不得不说，这些解决方案都没有真正奏效。 我已经尝试了接受的答案中的剪贴板解决方案，但它不适用于 Flash Player 10。我也尝试过 ZeroClipboard，我对它很满意一段时间。

我目前在我自己的网站 ( http://www.blogtrog.com ) 上使用它，但我一直注意到它有一些奇怪的错误。 ZeroClipboard 的工作方式是在页面元素的顶部放置一个不可见的 flash 对象。 我发现如果我的元素移动（比如当用户调整窗口大小并且我将东西对齐时），ZeroClipboard flash 对象就会失控并且不再覆盖该对象。 我怀疑它可能还在原来的地方。 他们的代码应该可以阻止这种情况，或者将其重新粘贴到元素上，但似乎效果不佳。

所以......在BlogTrog的下一个版本中，我想我会效仿我在野外看到的所有其他代码荧光笔，并删除我的“复制到剪贴板”按钮。 :-(

（我注意到 dp.syntaxhiglighter 的 Copy to Clipboard 现在也坏了。）

Answer 9

使用现代 document.execCommand("copy") 和 jQuery。 请参阅此堆栈溢出答案。

var ClipboardHelper = { // As Object

    copyElement: function ($element)
    {
        this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

如何调用它：

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

 // jQuery document ;(function ( $, window, document, undefined ) { var ClipboardHelper = { copyElement: function ($element) { this.copyText($element.text()) }, copyText:function(text) // Linebreaks with \\n { var $tempInput = $("<textarea>"); $("body").append($tempInput); //todo prepare Text: remove double whitespaces, trim $tempInput.val(text).select(); document.execCommand("copy"); $tempInput.remove(); } }; $(document).ready(function() { var $body = $('body'); $body.on('click', '*[data-copy-text-to-clipboard]', function(event) { var $btn = $(this); var text = $btn.attr('data-copy-text-to-clipboard'); ClipboardHelper.copyText(text); }); $body.on('click', '.js-copy-element-to-clipboard', function(event) { ClipboardHelper.copyElement($(this)); }); }); })( jQuery, window, document );

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span data-copy-text-to-clipboard= "Hello World"> Copy Text </span> <br><br> <span class="js-copy-element-to-clipboard"> Hello World Element </span>

Answer 10

检查此链接：

授予 JavaScript 访问剪贴板的权限

就像大家说的那样，出于安全原因，默认情况下它是禁用的。 上面的页面显示了如何启用它的说明（通过在 Firefox 中编辑about:config或user.js文件）。

幸运的是，有一个名为“AllowClipboardHelper”的插件，只需点击几下就可以让事情变得更容易。 但是您仍然需要指导您网站的访问者如何在 Firefox 中启用访问。

Answer 11

我使用了 GitHub 的Clippy来满足我的需要，它是一个简单的基于 Flash 的按钮。 如果不需要样式并且很高兴预先插入要粘贴到服务器端的内容，它就可以正常工作。

Answer 12

如果您支持 Flash，您可以使用https://everyplay.com/assets/clipboard.swf并使用 flashvars 文本设置文本。

https://everyplay.com/assets/clipboard.swf?text=It%20Works

这是我用来复制的，如果它不支持这些选项，你可以设置为额外的。 您可以使用：

对于 Internet Explorer：

window.clipboardData.setData(DataFormat, Text) 和 window.clipboardData.getData(DataFormat)

您可以使用 DataFormat 的 Text 和 URL 来获取数据和设置数据。

并删除数据：

您可以使用 DataFormat 的文件、HTML、图像、文本和 URL。 PS：你需要使用window.clipboardData.clearData(DataFormat); .

对于其他不支持的 window.clipboardData 和 swf Flash 文件，您也可以在 Windows 键盘上使用Control + C按钮，对于 Mac 则使用Command + C 。

Answer 13

从插件代码：

有关如何从 Chrome 代码执行此操作，您可以使用 nsIClipboardHelper 接口，如下所述： https : //developer.mozilla.org/en-US/docs/Using_the_Clipboard

Answer 14

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp适用于 Flash 10 和所有支持 Flash 的浏览器。

ZeroClipboard 也已更新，以避免提到的关于页面滚动的错误导致 Flash 电影不再位于正确的位置。

由于该方法“要求”用户单击按钮进行复制，因此这对用户来说很方便，并且不会发生任何恶意。

Answer 15

使用document.execCommand('copy') 。 最新版本的 Chrome、Firefox、Edge 和 Safari 都支持它。

 function copyText(text){ function selectElementText(element) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(element); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } } var element = document.createElement('DIV'); element.textContent = text; document.body.appendChild(element); selectElementText(element); document.execCommand('copy'); element.remove(); } var txt = document.getElementById('txt'); var btn = document.getElementById('btn'); btn.addEventListener('click', function(){ copyText(txt.value); })

 <input id="txt" value="Hello World!" /> <button id="btn">Copy To Clipboard</button>

Answer 16

尝试创建一个存储选择的内存全局变量。 然后另一个函数可以访问该变量并进行粘贴。 例如，

var memory = ''; // Outside the functions but within the script tag.

function moz_stringCopy(DOMEle, firstPos, secondPos) {

    var copiedString = DOMEle.value.slice(firstPos, secondPos);
    memory = copiedString;
}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0, newpos) + memory + DOMEle.value.slice(newpos);
}

Answer 17

Clipboard API旨在取代document.execCommand 。 Safari 仍在提供支持，因此您应该提供回退，直到规范确定并且 Safari 完成实施。

 const permalink = document.querySelector('[rel="bookmark"]'); const output = document.querySelector('output'); permalink.onclick = evt => { evt.preventDefault(); window.navigator.clipboard.writeText( permalink.href ).then(() => { output.textContent = 'Copied'; }, () => { output.textContent = 'Not copied'; }); };

 <a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a> <output></output>

出于安全原因，剪贴板可能需要Permissions才能从剪贴板读取和写入。 如果该代码段在 Stack Overflow 上不起作用，请在localhost或其他受信任的域上试一试。

Answer 18

基于来自 Studio.201 的 David的出色回答，这适用于 Safari、Firefox 和 Chrome。 它还通过将textarea放置在屏幕textarea确保textarea不会发生闪烁。

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {

    function copyText(text) {
        // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
    }


    // ============================================================================
    // Class API
    // ============================================================================
    return {
        copyText: copyText
    };
})();

Answer 19

Flash 解决方案的一个小改进是使用 swfobject 检测 Flash 10：

http://code.google.com/p/swfobject/

然后，如果它显示为 Flash 10，请尝试使用 JavaScript 加载 Shockwave 对象。 Shockwave 也可以使用Lingo 中的 copyToClipboard() 命令读/写剪贴板（在所有版本中）。