前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

前言

作为一名资深搬砖工，你要问我用得最熟练的技能是什么，那我敢肯定且自豪的告诉你：是 Ctrl+C ！是 Ctrl+V！

不信？你来看看我键盘上的 Ctrl、C 和 V 键，那油光发亮的包浆程度，不盘个三五年是绝对达不到的！

cv

编程界的江湖上曾经流传着一句话：CV da fa 好，CV da fa 妙！主要看疗效，谁用谁知道！（为防河蟹，且用拼音凑合着）

从这句话就可以看出编程界的同仁们对 CV 的追捧和狂热，简直是席卷大街小巷、风靡大江南北！一时之间，不知让多少 IT 英雄们“竞折腰”，即使到了现在，它依然是编程入门的必修技能！

那么，CV 到底有什么魔力，能让人这么着迷，一代又一代的传承不息呢？

今天，让我们一起来揭开前端 JavaScript 开发界 CV 的面纱，一睹真容（套路）！

旧法

世界上最好的语言—— JavaScript，必然是有着访问系统剪切板的功能的，主要依靠 Document.execCommand() 接口实现复制、粘贴、剪切等功能。

• document.execCommand('copy')
• document.execCommand('cut')
• document.execCommand('paste')

复制

const inputEle = document.querySelector('#input');
inputEle.select();
document.execCommand('copy');

首先获取到这个 input 元素，然后选中 input 中的内容，再调用复制接口，将 input 内容复制到剪切板。

注意，复制操作最好放在事件监听函数里面，由用户触发（比如用户点击按钮）。

粘贴

const pasteText = document.querySelector('#output');
pasteText.focus();
document.execCommand('paste');

首先让 input 元素获得焦点，然后调用粘贴接口，将剪切板内容粘贴到 input。

剪切

用法同复制。

小结

从上面的示例来看，剪切板 API 用着很简单，但它有以下不足：

1. 它不够灵活，只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。
2. 它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。
3. 有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。

进化 ——Clipboard

为了使 JavaScript 更加灵活的操作剪切板，也是为了顺应 JS 发展的历史潮流，Clipboard API 应运而生。它是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，就能提供系统剪贴板的读写访问。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。

基本使用

navigator.clipboard 属性返回 Clipboard 对象，所有操作都通过这个对象进行。

(async () => {
  	const text = await navigator.clipboard.readText();
  	console.log(text);
})();

如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。

安全限制

1. Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。
2. 调用时需要明确获得用户的许可。权限的具体实现使用了 Permissions API，跟剪贴板相关的有两个权限：clipboard-write（写权限）和clipboard-read（读权限）。“写权限”自动授予脚本，而“读权限”必须用户明确同意给予。也就是说，写入剪贴板，脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框，询问用户是否同意读取。

脚本读取的总是当前页面的剪贴板。这带来的一个问题是，如果把相关的代码粘贴到开发者工具中直接运行，可能会报错，因为这时的当前页面是开发者工具的窗口，而不是网页页面。

如果用户没有适时使用 Permissions API) 授予相应权限和"clipboard-read" 或 "clipboard-write" 权限，调用 Clipboard 对象的方法不会成功。

方法

Clipboard 对象提供了四个方法，用来读写剪贴板。它们都是异步方法，返回 Promise 对象。

• read() 从剪贴板读取数据（比如图片），返回一个 Promise对象。
• readText() 从操作系统读取文本，返回一个 Promise对象。
• write() 写入任意数据至操作系统剪贴板。
• writeText() 写入文本至操作系统剪贴板。

浏览器兼容性

目前，各个浏览器厂商正在逐步开始支持 Clipboard 对象及其方法，兼容性如下：

iShot2021-06-22 16.24.50

总结

对上面所说的做一个总结：

1. Clipboard 对象的方法，返回一个 Promise 对象
2. Clipboard 的使用存在一定的安全限制，需要注意。
3. 在控制台运行 Clipboard 可能会报错。

~

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！