前言
作為一名資深搬磚工，你要問我用得最熟練的技能是什么，那我敢肯定且自豪的告訴你：是 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 可能會報錯。
~
- ~
- 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以余韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！