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