共计 2301 个字符，预计需要花费 6 分钟才能阅读完成。
前言
作为一名资深搬砖工，你要问我用得最纯熟的技能是什么，那我敢肯定且骄傲的通知你：是 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 可能会报错。
~
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
你来，怀揣冀望，我有墨香相迎！你归，无论得失，唯以余韵相赠！
常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！
