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

时间：2008-09-24 13:12:58

标签： javascript dom clipboard

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

19 个答案:

答案 0 :(得分：49)

出于安全考虑，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 cache）

答案 1 :(得分：19)

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

轻松完成此操作 
document.execCommand('copy');

这将复制当前选定的文本。您可以使用

选择textArea或输入字段 
document.getElementById('myText').select();

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

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

一个完整的例子看起来像

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>

答案 2 :(得分：13)

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

另见Is it possible to read the clipboard in Firefox, Safari and Chrome using Javascript?

答案 3 :(得分：10)

这是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

上

答案 4 :(得分：9)

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

答案 5 :(得分：8)

Firefox允许您将数据存储在剪贴板中，但由于安全隐患，默认情况下会禁用它。了解如何在Mozilla Firefox知识库中的"Granting JavaScript access to the clipboard"中启用它。

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

答案 6 :(得分：5)

copyIntoClipboard（）函数适用于Flash 9，但它似乎被Flash播放器10的发布打破了。这是一个可以与新的Flash播放器配合使用的解决方案：

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

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

答案 7 :(得分：4)

我必须说这些解决方案确实都不起作用。我已经从接受的答案中尝试了剪贴板解决方案，并且它不适用于Flash Player 10.我也尝试过ZeroClipboard，我对它感到非常满意。

我目前正在自己​​的网站上使用它（http://www.blogtrog.com），但我一直注意到它的奇怪错误。 ZeroClipboard的工作方式是将不可见的flash对象放在页面元素的顶部。我发现如果我的元素移动（就像用户调整窗口大小并且我正确对齐的话），ZeroClipboard flash对象就会失控，不再覆盖对象。我怀疑它可能仍然坐在最初的位置。他们有代码可以阻止它，或者将它重新设置为元素，但它似乎不能很好地工作。

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

（我注意到dp.syntaxhiglighter的复制到剪贴板现在也被破坏了。）

答案 8 :(得分：3)

方式太老问题，但我没有在任何地方看到这个答案......

检查此链接：

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

像所有人说的那样，出于安全原因，默认情况下是禁用的。上面的链接显示了如何启用它的说明（通过在firefox或user.js中编辑about：config）。

幸运的是，有一个名为“AllowClipboardHelper”的插件，只需点击几下便可让您更轻松。但是你仍然需要指导你的网站访问者如何在firefox中启用访问。

答案 9 :(得分：2)

我已经使用Github的Clippy来满足我的需求，简单的基于Flash的按钮。工作得很好，如果一个人不需要样式，并且很高兴事先在服务器端插入要粘贴的内容。

答案 10 :(得分：2)

使用现代document.execCommand（“copy”） 和jQuery。 See this stackoverflow answer 

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>

答案 11 :(得分：1)

如果您支持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文件的你也可以使用键盘上的control + c按钮来获取windows和mac命令+ c

答案 12 :(得分：1)

来自插件代码：

如果其他人正在寻找如何从Chrome代码中执行此操作，您可以使用nsIClipboardHelper界面，如下所述：https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

答案 13 :(得分：1)

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

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

由于该方法“需要”用户点击按钮进行复制，这对用户来说既方便又没有任何恶意。

答案 14 :(得分：1)

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

答案 15 :(得分：1)

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

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

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

答案 16 :(得分：1)

基于Studio.201中@David的出色回答，它可以在Safari，FF和Chrome中使用。通过将其放置在屏幕外，还可以确保JSONObject jsonContent = new JSONObject(content); JSONObject jsonBackground = jsonContent.getJSONObject("background"); JSONArray jsonArrayMatches = jsonBackground.getJSONArray("matches"); 不会出现闪烁。

textarea

答案 17 :(得分：0)

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

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

}

答案 18 :(得分：0)

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来从剪贴板进行读取和写入。如果该代码段无法正常运行，请在localhost或其他受信任的域上试用。

相关问题
最新问题