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


113

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


如果您想在chrome控制台中执行此操作,则可以使用copydeveloper.chrome.com
devtools/docs/commandline


1
@ bjb568,您提到的问题是稍后输入的,所以重复了
GvS 2014年

@GvS不一定总是先发布哪个。另一个更受欢迎,得到了更多答案。如果需要,请对其进行标记,以便主持人可以合并问题。
bjb568 2014年

Answers:


21

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

document.execCommand('copy');

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

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>


50

出于安全原因,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缓存


17
第三个缺点是,如果不更改Flash的权限,它将无法在本地(file://)工作。code.google.com/p/zeroclipboard是围绕此方法构建的库。
Regis Frey 2010年

@ b1naryatr0phy:大多数情况下为True,但HTML5仍不能替代Flash当前提供的剪贴板功能(例如,使用ZeroClipboard)。
James M. Greene 2013年

3
自2014年起,此方法不再适用于任何现代浏览器。ZeroClipboard是目前解决此问题的唯一技术
Cozzamara 2014年

截至2015年9月,Flash的死亡速度相对较快,而ZeroClipboard基于其用途。对于不使用Flash的解决方案,请参见下面我从2015年8月开始的回答。
编码器


10

现在是2015年夏季,Flash充满了动荡,我想为这个问题添加一个新的答案,避免完全使用它。

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

Clipper.js也在GitHub上


1
您提供的(指向npmjs.com的)第一个链接说它不适用于IE,但是可以(实际上在GitHub上说了)
gordon613

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行,并且想知道是否可以设置其他数据类型,那么答案是肯定的。


对于野生动物园,我需要.select()在输入框上运行A ,然后再调用它。
乍得·希拉(Chat Scira)

您是否也应该删除事件监听器?
克里斯·沃尔什

1
@ChrisWalsh是的,它是在代码示例的处理程序内完成的。原因是处理程序否则仍将保留在内存中。
Spoike

8

Firefox确实允许您将数据存储在剪贴板中,但是由于安全隐患,默认情况下将其禁用。请参阅“授予对剪贴板的JavaScript访问权限”中的启用方法 Mozilla Firefox知识库中的。

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



4

我不得不说,这些解决方案的真正起作用。我已经从可接受的答案中尝试了剪贴板解决方案,但是它不适用于Flash Player10。我也尝试了ZeroClipboard,我对此感到非常满意。

我目前在自己的网站(http://www.blogtrog.com),但是我一直注意到它的怪异错误。ZeroClipboard的工作方式是将不可见的Flash对象放在页面上元素的顶部。我发现,如果我的元素移动了(例如当用户调整窗口大小并且我对齐了东西时),ZeroClipboard Flash对象将摆脱困境,不再覆盖该对象。我怀疑它可能仍然坐在原来的位置。他们的代码应该停止该代码,或者将其重新粘贴到该元素上,但是似乎无法正常工作。

因此,在下一个BlogTrog版本中,我想我会沿用我在野外看到的所有其他代码突出显示,并删除“复制到剪贴板”按钮。:-(

(我注意到dp.syntaxhiglighter的“复制到剪贴板”现在也已损坏。)


3
当功能必须以安全性的名义退后一步时,这是可悲的。我真的希望有一个既安全又可以从网页访问剪贴板的解决方案,即使用户不得不一次或多次授予它明确的权限。
devios1 2012年

这就是IE默认情况下所做的
Matthew Lock

3

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

检查此链接:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

就像每个人所说的,出于安全原因,默认情况下是禁用的。上面的链接显示了如何启用它的说明(通过在firefox或user.js中编辑about:config)。

幸运的是,有一个名为“ AllowClipboardHelper”的插件,只需单击几下即可使事情变得更容易。但是,您仍然需要指导网站的访问者如何在firefox中启用访问。


难道Chrome / WebKit不会有这样的东西吗?
devios1 2012年

3

使用现代的document.execCommand(“ copy”)和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>


2

我已经根据需要使用了Github的Clippy,这是一个简单的基于Flash的按钮。如果不需要样式,并且对预先粘贴要粘贴到服务器端的内容感到满意,则效果很好。


1

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

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

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



1

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

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

}

3
可以从任何不在页面内考虑的地方进行复制
-Marwan

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来获取Data和setData。

并删除数据:

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

对于不支持window.clipboardData和swf flash文件的其他文件,您还可以在Windows键盘上使用Ctrl + C按钮,对于Mac,也可以使用其命令+ c



1

使用document.execCommand('copy')。支持最新版本的ChromeFirefoxEdge,和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>


1

剪贴板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="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

出于安全原因,Permissions可能有必要从剪贴板读取和写入剪贴板。如果该代码段无法正常运行,请尝试localhost或信任该域。


1

基于Studio.201中@David的出色回答,它可以在Safari,FF和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
    };
})();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.