web端的新增的粘贴复制，navigator.clipboard.writeText()

document.execCommand 已被废弃，现在我们如何与剪贴板交互？

复制到剪贴板”是一个极为常见的web功能。多年来，我们一直依赖一个略显“古老”的 API——document.execCommand('copy')。它曾是我们的得力助手，但现在，它已经被正式标记为废弃（Deprecated）。

document.execCommand 为何被时代抛弃？

在拥抱新事物之前，我们有必要了解旧事物的缺陷。execCommand 主要有三大“原罪”：

1. 同步执行：execCommand 是一个同步操作。这意味着在执行时，它会阻塞浏览器的主线程。如果处理的数据量很大或页面复杂，可能会导致页面瞬间卡顿，影响用户体验。
2. 依赖 DOM：execCommand 只能操作当前文档中**被选中（selected）**的内容。为了复制一段任意文本，我们不得不采取一些非常“黑客”的手段：
• 动态创建一个隐藏的 <textarea> 或 <input> 元素。
• 将想要复制的文本放入这个元素。
• 用 JavaScript 选中该元素的全部内容。
• 调用 document.execCommand('copy')。
• 最后，移除这个临时创建的元素。
  这一套流程繁琐、不直观，且容易出错。
3. 权限模型不清晰：它对剪贴板的访问权限控制非常模糊，不同浏览器的实现和限制也存在差异，这带来了一定的安全隐患。

正是因为这些原因，W3C 决定将其废弃，并推出了一个为现代 Web 量身定做的解决方案。

新的主角：强大的 Clipboard API (navigator.clipboard)

Clipboard API 是一个异步的、基于 Promise 的现代接口，它彻底改变了我们与剪贴板交互的方式。

它的核心优势在于：

• 异步操作：所有操作都返回 Promise，不会阻塞主线程，对性能友好。
• 安全可靠：它整合了浏览器的权限系统（Permissions API）。在读取剪贴板内容时，需要明确获得用户的授权，并且大多数操作要求页面在**安全上下文（HTTPS）**下运行。
• 不依赖 DOM：你可以直接将字符串、图片等数据写入剪贴板，无需任何 DOM 元素作为中介。
• 功能更强大：除了纯文本，它还支持写入和读取更丰富的数据类型，例如图片。

 

实战演练：如何使用 Clipboard API

让我们来看几个最常见的场景。

场景一：复制文本到剪贴板

这是最基础的需求。使用 navigator.clipboard.writeText()，一切都变得异常简单。

HTML:

<input id="copy-input" type="text" value="这是要被复制的文本">
<button id="copy-btn">复制文本</button>

　

 

看，代码干净利落！我们不再需要任何隐藏的 <textarea>。async/await 和 try...catch 的组合完美地处理了异步流程和可能出现的错误（例如用户拒绝授权）。

 

场景二：从剪贴板读取文本

读取操作比写入更敏感，因此浏览器会向用户请求权限。注意： 出于安全考虑，readText() 和 read() 方法通常只能在用户主动交互（如点击事件）的回调中调用。

HTML:

<button id="paste-btn">粘贴内容</button>
<div id="paste-area" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;"></div>

　

 

场景三：更进一步，复制图片

这是 execCommand 无法直接做到的。Clipboard API 通过 write() 方法和 ClipboardItem 对象，让复制非文本数据成为可能。

async function copyImageToClipboard(imageUrl) {
 try {
    // 1. 获取图片数据
    const response = await fetch(imageUrl);
    const blob = await response.blob(); // 将图片转换为 Blob 对象

    // 2. 创建一个 ClipboardItem
    const item = new ClipboardItem({
      [blob.type]: blob
    });

    // 3. 写入剪贴板
    await navigator.clipboard.write([item]);
    console.log('图片已复制到剪贴板');
  } catch (err) {
    console.error('复制图片失败: ', err);
  }
}