前端 JavaScript 复制粘贴的奥义—

前言

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

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

编程界的江湖上曾经流传着一句话：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 用着很简单，但它有以下不足：

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

进化 ——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。

安全限制

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

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

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

方法

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

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

浏览器兼容性

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

总结

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

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

~: 本文完，感谢阅读！

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

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

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

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