复制/放的文字上的剪贴板火狐，野生动物园和铬

StackOverflow https://stackoverflow.com/questions/127040

  •  02-07-2019
  •  | 
  •  

题

在Internet Explorer，我可以使用的clipboardData对象访问的剪贴板。我怎么可以这样做，在火狐，动物园和/或浏览器？

有帮助吗？

解决方案

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

轻松完成此操作 
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>

其他提示

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

在线电子表格挂钩Ctrl + C，Ctrl + 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 上

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

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

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

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

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

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

我必须说，没有这些解决方案 真的 的工作。我曾试图剪贴板从溶液接受的答案，它不起作用Flash Player10.我也试过ZeroClipboard，我很高兴与这一段时间。

目前，我正在使用我自己的网站(http://www.blogtrog.com的)，但是我已经注意到奇怪的错误。的方式ZeroClipboard的工作原理是，它把一个无形的闪光物顶部的一个元素在你的网页。我发现如果我的元素的移动(如当的用户调整的窗口，我有事情做好准)，ZeroClipboard闪目得出的失衡和不再复盖的对象。我怀疑这可能仍然坐在那里它是。他们代码，应该停止，或restick它的元素，但它不似乎运作良好。

所以...在下一个版本的BlogTrog，我猜我会跟所有其他代笔我已经看到在野外和除了我的副本剪贴板按钮。:-(

(I注意到dp。syntaxhiglighter的副本剪贴板坏了现在也是.)

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

检查此链接：

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

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

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

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

使用现代document.execCommand（＆quot; copy＆quot;） 和jQuery。 查看此stackoverflow答案 

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>

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

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

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

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

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

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

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

https://everyplay.com/assets/clipboard.swf?text=它％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

来自插件代码：

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

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

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

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

}

剪贴板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>

出于安全原因，可能需要剪贴板 权限 来阅读和从剪贴板写。如果代码段在SO上不起作用，请在 localhost 或其他受信任的域上进行操作。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top