如何使用JavaScript复制到剪贴板？


How do I copy to the clipboard in JavaScript?

将文本复制到剪贴板的最佳方法是什么？(多浏览器)

我已经尝试过：

1
2
3
4
5
6
7
8
9
function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

但在Internet Explorer中，它给出了一个语法错误。在firefox中，它表示unsafeWindow is not defined。

不使用flash的一个好技巧：trello如何访问用户的剪贴板？

相关讨论

概述

有三个主要的浏览器API用于复制到剪贴板：好的。

  • 异步剪贴板API [navigator.clipboard.writeText]。
    • Chrome 66提供文本焦点部分(2018年3月)
    • 访问是异步的，使用的是javascript承诺，可以写入，这样安全用户提示(如果显示)就不会中断页面中的javascript。
    • 文本可以直接从变量复制到剪贴板。
    • 仅在通过HTTPS提供服务的页面上支持。
    • 在Chrome中，活动选项卡中的66页可以在没有权限提示的情况下写入剪贴板。
  • document.execCommand('copy')
    • 截至2015年4月，大多数浏览器都支持此功能(请参阅下面的浏览器支持)。
    • 访问是同步的，即停止页面中的javascript直到完成，包括显示和用户与任何安全提示交互。
    • 文本从DOM读取并放在剪贴板上。
    • 在测试期间~2015年4月，只有Internet Explorer在写入剪贴板时显示权限提示。
  • 覆盖复制事件
    • 有关重写复制事件的信息，请参阅剪贴板API文档。
    • 允许您从任何复制事件中修改剪贴板上显示的内容，可以包括纯文本以外的其他数据格式。
    • 不包括在这里，因为它不能直接回答问题。

    • 一般发展说明

    在控制台中测试代码时，不要期望与剪贴板相关的命令可以工作。通常，页面需要处于活动状态(异步剪贴板API)或需要用户交互(例如用户单击)以允许(document.execCommand('copy')访问剪贴板。有关详细信息，请参阅下面的内容。好的。异步+回退

    由于新的异步剪贴板API的浏览器支持级别不同，您可能希望回退到document.execCommand('copy')方法以获得良好的浏览器覆盖率。好的。

    下面是一个简单的例子：好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    function fallbackCopyTextToClipboard(text) {
      var textArea = document.createElement("textarea");
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Fallback: Copying text command was ' + msg);
      } catch (err) {
        console.error('Fallback: Oops, unable to copy', err);
      }

      document.body.removeChild(textArea);
    }
    function copyTextToClipboard(text) {
      if (!navigator.clipboard) {
        fallbackCopyTextToClipboard(text);
        return;
      }
      navigator.clipboard.writeText(text).then(function() {
        console.log('Async: Copying to clipboard was successful!');
      }, function(err) {
        console.error('Async: Could not copy text: ', err);
      });
    }

    var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
      copyJaneBtn = document.querySelector('.js-copy-jane-btn');

    copyBobBtn.addEventListener('click', function(event) {
      copyTextToClipboard('Bob');
    });


    copyJaneBtn.addEventListener('click', function(event) {
      copyTextToClipboard('Jane');
    });
    1
    2
    3
    4
    5
    6
    7
      <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
      <button class="js-copy-jane-btn">Set clipboard to JANE</button>


      <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

      </textarea>

    好的。

    请注意，此代码段在Stack Overflow的Embedded Preview中不起作用，您可以在这里尝试：https://codepen.io/deanmarkTaylor/pen/rmrajx？编辑= 1011好的。异步剪贴板API

    • Chrome 66公告贴(2018年3月)
    • 引用异步剪贴板API草稿文档

    请注意，可以通过chrome 66中的权限API"请求权限"并测试对剪贴板的访问。好的。

    1
    2
    3
    4
    5
    6
    var text ="Example text to appear on clipboard";
    navigator.clipboard.writeText(text).then(function() {
      console.log('Async: Copying to clipboard was successful!');
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });

    document.execcommand('副本')

    本文的其余部分将深入讨论document.execCommand('copy')API的细微差别和细节。好的。浏览器支持

    javascript document.execCommand('copy')支持已经增加，请参阅以下链接了解浏览器更新：好的。

    • Internet Explorer 10+(尽管本文档表明Internet Explorer 5.5+提供了一些支持)。
    • Google Chrome 43+(~2015年4月)
    • Mozilla Firefox 41+(2015年9月发货)
    • Opera 29+(基于Chromium 42，~2015年4月)

    简单实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

    copyTextareaBtn.addEventListener('click', function(event) {
      var copyTextarea = document.querySelector('.js-copytextarea');
      copyTextarea.focus();
      copyTextarea.select();

      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
      } catch (err) {
        console.log('Oops, unable to copy');
      }
    });

    < PRE> <代码>