如何在所有浏览器中使用 JavaScript 将文本复制到剪贴板？

如何在 JavaScript 中复制到剪贴板（跨浏览器）

概述

至将文本复制到剪贴板，您可以使用三种主要浏览器API：

1. 异步剪贴板 API (navigator.clipboard.writeText)
2. document.execCommand('copy')（已弃用）
3. 覆盖副本事件

一般开发注意事项

• 在控制台中测试代码时禁用剪贴板功能。
• 页面必须是活动（异步剪贴板 API）或需要用户交互（document.execCommand('copy')）来访问

实现

异步回退

为了获得最佳的浏览器覆盖率，请将异步剪贴板 API 与后退到document.execCommand('copy'):

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

剪贴板 API 比较

API

功能

支持

API	Features	Support
Async Clipboard API	Text-focused, asynchronous, supports HTTPS	Chrome 66 (March 2018), works in inactive tabs
document.execCommand('copy')	Synchronous, reads text from DOM	Most browsers (as of April 2015), displays permission prompts
Overriding the Copy Event	Can modify clipboard content from any copy event, supports various data formats	Not directly related to the question

异步剪贴板API

以文本为中心，异步，支持 HTTPS

Chrome 66（2018 年 3 月），适用于非活动标签页

document.execCommand('copy')

同步，从 DOM 读取文本

大多数浏览器（截至 2015 年 4 月），显示权限提示

覆盖复制事件

可以从任何复制事件修改剪贴板内容，支持多种数据格式

与问题没有直接关系

注意(2020/02/20)已弃用的权限会阻止代码片段在某些浏览器中运行。使用通过 HTTPS 提供的活动网页进行测试和开发。

以上是如何在所有浏览器中使用 JavaScript 将文本复制到剪贴板？的详细内容。更多信息请关注PHP中文网其他相关文章！