Question

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

Answer 1

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

document.execCommand( copy );

这将复制当前选定的文本。您可以使用选择文本区域或输入字段

document.getElementById( myText ).select();

要隐形复制文本，您可以快速生成一个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 2

出于安全考虑，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/（其谷歌缓存）

Answer 3

在线电子表格应用程序钩住Ctrl+C和+V

另请参阅是否可以使用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>

剪贴板.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 );
}

现在要复制＜code＞copyStringToClipboard（你好，世界！）

如果您注意到＜code＞setData＜/code＞行，并想知道是否可以设置不同的数据类型，那么答案是肯定的。

Answer 6

Firefox确实允许您将数据存储在剪贴板中，但由于安全问题，它在默认情况下被禁用。查看如何在“授予JavaScript对剪贴板的访问权限”。

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

Answer 7

copyIntoClipboard（）函数适用于Flash 9，但随着Flash播放器10的发布，它似乎被打破了。以下是一个适用于新的flash播放器的解决方案：

http://bowser.macminicolo.net/~jhuckaby/零剪贴板/

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

Answer 8

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

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

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

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

Answer 9

检查此链接：

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

正如大家所说，出于安全原因，它默认为禁用状态。上面的页面显示了如何启用它的说明（通过在Firefox或user.js文件中编辑about:config）。

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

Answer 10

使用现代文档.excCommand（“副本”）和jQuery。请参阅此堆栈溢出答案。

var ClipboardHelper = { // As Object

    copyElement: function ($element)
    {
        this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with 

    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

如何称呼它：

ClipboardHelper.copyText( Hello
World );
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 

        {
            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 11

我使用过GitHub的Clippy适合我的需求，是一个简单的基于Flash的按钮。如果不需要样式，它可以很好地工作，并且可以提前在服务器端插入要粘贴的内容。

Answer 12

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

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

由于这种方法“需要”用户点击一个按钮进行复制，这对用户来说是一种方便，并且没有发生任何邪恶的事情。

Answer 13

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

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

然后，如果它显示为Flash 10，请尝试使用JavaScript加载Shockwave对象。Shockwave也可以使用语言。

Answer 14

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

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 15

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

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

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

对于Internet Explorer：

window.clipboardData.setData（数据格式，文本）和window.clipboard Data.getData（数据格式）

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

要删除数据：

您可以使用DataFormat的文件、HTML、图像、文本和URL。PS：您需要使用＜code＞window.clipboardData.clearData（数据格式）。

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

Answer 16

来自插件代码：

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

Answer 17

使用＜code＞document.execCommand（副本）＜/code＞。最新版本的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 18

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

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

Answer 19

建立优秀的来自Studio的David的回答。201，这适用于Safari、Firefox和Chrome。它还通过将文本区域放在屏幕外来确保不会发生闪烁。

// ================================================================================
// 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
    };
})();

友情链接