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

Question

在 Internet Explorer 中，我可以使用 clipboardData 对象来访问剪贴板。如何在 FireFox、Safari 和/或 Chrome 中做到这一点？

score 50 · Accepted Answer

出于安全原因，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 缓存也是如此）

score 22 · Accepted Answer

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

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>

score 13 · Accepted Answer

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

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

score 10 · Accepted Answer

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

score 9 · Accepted Answer

截至 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条线，并且想知道是否可以设置不同的数据类型，答案是肯定的。

score 8 · Accepted Answer

Firefox 确实允许您将数据存储在剪贴板中，但出于安全考虑，默认情况下它是禁用的。在 Mozilla Firefox 知识库中的“授予对剪贴板的 JavaScript 访问权限”中查看如何启用它。

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

score 5 · Accepted Answer

copyIntoClipboard() 函数适用于 Flash 9，但它似乎因 Flash 播放器 10 的发布而被破坏。这是一个适用于新 Flash 播放器的解决方案：

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

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

score 4 · Accepted Answer

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

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

所以……在下一个版本的 BlogTrog 中，我想我会效仿我在野外看到的所有其他代码荧光笔，并删除我的 Copy to Clipboard 按钮。:-(

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

score 3 · Accepted Answer

检查此链接：

授予对剪贴板的 JavaScript 访问权限

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

幸运的是，有一个名为“AllowClipboardHelper”的插件，只需单击几下即可轻松完成。但是，您仍然需要指导您网站的访问者如何在 Firefox 中启用访问。

score 3 · Accepted Answer

使用现代的 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>

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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);
}

score 1 · Accepted Answer

如果您支持 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 来getData 和setData。

并删除数据：

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

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

score 1 · Accepted Answer

从插件代码：

对于如何从 Chrome 代码执行此操作，您可以使用此处描述的 nsIClipboardHelper 界面：https ://developer.mozilla.org/en-US/docs/Using_the_Clipboard

score 1 · Accepted Answer

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

score 1 · Accepted Answer

剪贴板 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或其他受信任的域上试一试。

score 1 · Accepted Answer

基于来自 Studio.201 的 David的出色回答，它适用于 Safari、Firefox 和 Chrome。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
    };
})();

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

19 回答 19

Related

Reference