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

出于安全原因,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;
}

源当前已死亡: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (其结果也是如此 Google cache

document.execCommand('copy');

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

document.getElementById('myText').select();

出于安全原因,浏览器只允许在用户执行某种操作(即单击按钮)时进行复制。一种方法是向调用复制文本的方法的html按钮添加onClick事件。

一个完整的例子:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

在线电子表格应用程序挂钩 Ctrl键 C Ctrl键 + v

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

现在是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也是 on GitHub

截至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

Firefox确实允许您将数据存储在剪贴板中,但由于安全问题,默认情况下它是禁用的。查看如何在中启用它 "Granting JavaScript access to the clipboard" 在Mozilla Firefox知识库中。

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

copyIntoClipboard()函数适用于Flash 9,但Flash player 10的发布似乎破坏了该函数。以下是一个与新的flash player配合使用的解决方案:

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

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

http://www.blogtrog.com ),但我注意到它有奇怪的虫子。ZeroClipboard的工作方式是,它将一个不可见的flash对象放在页面元素的顶部。我发现,如果我的元素移动了(比如当用户调整窗口大小,我把东西对齐时),ZeroClipboard flash对象就会失去正常,不再覆盖对象。我怀疑它可能还在原来的地方。他们的代码应该停止这种行为,或者将其重新粘贴到元素中,但似乎效果不好。

所以在BlogTrog的下一个版本中,我想我会效仿我在野外看到的所有其他代码高亮器,删除我的“复制到剪贴板”按钮-(

(我注意到dp.syntaxighlighter复制到剪贴板的副本现在也已损坏。)

检查此链接:

Granting JavaScript access to the clipboard

正如大家所说,出于安全原因,默认情况下它是禁用的。上面的页面显示了如何启用它(通过编辑)的说明 关于:配置 user.js 文件)。

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

使用现代document.execCommand(“copy”)和jQuery。看见 this Stack Overflow 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>

Clippy 粘贴什么

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

由于该方法“需要”用户单击按钮进行复制,因此这对用户来说是一种方便,并且没有任何恶意的事情发生。

闪存解决方案的一个轻微改进是使用swfobject检测闪存10:

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

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

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

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

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

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

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

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

以及删除数据:

window.clipboardData.clearData(DataFormat); .

对于其他不支持window.clipboardData和swf Flash文件的文件,您也可以使用 控制 + 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>

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 可能需要从剪贴板读写。如果代码段对StackOverflow不起作用,请尝试一下 localhost 或其他受信任的域。

answer from David from Studio.201 ,这适用于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
    };
})();