前言
作為一名資深搬磚工，你要問我用得最熟練的技能是什么，那我敢肯定且自豪的告訴你：是 Ctrl+C 虹蒋！是 Ctrl+V！
不信？你來看看我鍵盤上的 Ctrl魄衅、C 和 V 鍵峭竣，那油光發(fā)亮的包漿程度，不盤個三五年是絕對達(dá)不到的晃虫！
編程界的江湖上曾經(jīng)流傳著一句話：CV da fa 好皆撩，CV da fa 妙！主要看療效哲银，誰用誰知道Ｒ惴谩（為防河蟹，且用拼音湊合著）
從這句話就可以看出編程界的同仁們對 CV 的追捧和狂熱盘榨，簡直是席卷大街小巷喻粹、風(fēng)靡大江南北！一時之間草巡，不知讓多少 IT 英雄們“競折腰”守呜，即使到了現(xiàn)在，它依然是編程入門的必修技能山憨！
那么查乒，CV 到底有什么魔力，能讓人這么著迷郁竟，一代又一代的傳承不息呢玛迄？
今天，讓我們一起來揭開前端 JavaScript 開發(fā)界 CV 的面紗棚亩，一睹真容（套路）蓖议！
舊法
世界上最好的語言—— JavaScript，必然是有著訪問系統(tǒng)剪切板的功能的讥蟆，主要依靠 Document.execCommand() 接口實現(xiàn)復(fù)制勒虾、粘貼、剪切等功能瘸彤。
document.execCommand('copy')document.execCommand('cut')document.execCommand('paste')
復(fù)制
const inputEle = document.querySelector('#input');
inputEle.select();
document.execCommand('copy');
首先獲取到這個 input 元素修然，然后選中 input 中的內(nèi)容，再調(diào)用復(fù)制接口质况，將 input 內(nèi)容復(fù)制到剪切板愕宋。
注意，復(fù)制操作最好放在事件監(jiān)聽函數(shù)里面结榄，由用戶觸發(fā)（比如用戶點擊按鈕）中贝。
粘貼
const pasteText = document.querySelector('#output');
pasteText.focus();
document.execCommand('paste');
首先讓 input 元素獲得焦點，然后調(diào)用粘貼接口潭陪，將剪切板內(nèi)容粘貼到 input雄妥。
剪切
用法同復(fù)制。
小結(jié)
從上面的示例來看依溯，剪切板 API 用著很簡單老厌，但它有以下不足：
- 它不夠靈活，只能將選中的內(nèi)容復(fù)制到剪貼板黎炉，無法向剪貼板任意寫入內(nèi)容枝秤。
- 它是同步操作，如果復(fù)制/粘貼大量數(shù)據(jù)慷嗜，頁面會出現(xiàn)卡頓淀弹。
- 有些瀏覽器還會跳出提示框，要求用戶許可庆械，這時在用戶做出選擇前薇溃，頁面會失去響應(yīng)。
進(jìn)化 ——Clipboard
為了使 JavaScript 更加靈活的操作剪切板缭乘，也是為了順應(yīng) JS 發(fā)展的歷史潮流沐序，Clipboard API 應(yīng)運而生。它是下一代的剪貼板操作方法堕绩，比傳統(tǒng)的document.execCommand()方法更強(qiáng)大策幼、更合理。
Clipboard 接口實現(xiàn)了 Clipboard API奴紧，如果用戶授予了相應(yīng)的權(quán)限特姐，就能提供系統(tǒng)剪貼板的讀寫訪問。在 Web 應(yīng)用程序中黍氮，Clipboard API 可用于實現(xiàn)剪切唐含、復(fù)制和粘貼功能。
它的所有操作都是異步的沫浆，返回 Promise 對象觉壶，不會造成頁面卡頓。而且件缸，它可以將任意內(nèi)容（比如圖片）放入剪貼板铜靶。
該 API 被設(shè)計用來取代使用 document.execCommand() 的剪貼板訪問方式。
基本使用
navigator.clipboard 屬性返回 Clipboard 對象他炊，所有操作都通過這個對象進(jìn)行争剿。
(async () => {
const text = await navigator.clipboard.readText();
console.log(text);
})();
如果navigator.clipboard屬性返回undefined形真，就說明當(dāng)前瀏覽器不支持這個 API序苏。
安全限制
- Chrome 瀏覽器規(guī)定，只有 HTTPS 協(xié)議的頁面才能使用這個 API检眯。不過凿叠，開發(fā)環(huán)境（
localhost）允許使用非加密協(xié)議涩笤。 - 調(diào)用時需要明確獲得用戶的許可嚼吞。權(quán)限的具體實現(xiàn)使用了 Permissions API，跟剪貼板相關(guān)的有兩個權(quán)限：
clipboard-write（寫權(quán)限）和clipboard-read（讀權(quán)限）蹬碧〔涨荩“寫權(quán)限”自動授予腳本，而“讀權(quán)限”必須用戶明確同意給予恩沽。也就是說誊稚，寫入剪貼板，腳本可以自動完成罗心，但是讀取剪貼板時里伯，瀏覽器會彈出一個對話框，詢問用戶是否同意讀取渤闷。
腳本讀取的總是當(dāng)前頁面的剪貼板疾瓮。這帶來的一個問題是，如果把相關(guān)的代碼粘貼到開發(fā)者工具中直接運行飒箭，可能會報錯爷贫，因為這時的當(dāng)前頁面是開發(fā)者工具的窗口，而不是網(wǎng)頁頁面补憾。
如果用戶沒有適時使用 Permissions API) 授予相應(yīng)權(quán)限和
"clipboard-read"或"clipboard-write"權(quán)限漫萄，調(diào)用Clipboard對象的方法不會成功。
方法
Clipboard 對象提供了四個方法盈匾，用來讀寫剪貼板腾务。它們都是異步方法，返回 Promise 對象削饵。
-
read()從剪貼板讀取數(shù)據(jù)（比如圖片）岩瘦，返回一個 Promise對象。 -
readText()從操作系統(tǒng)讀取文本窿撬，返回一個 Promise對象启昧。 -
write()寫入任意數(shù)據(jù)至操作系統(tǒng)剪貼板。 -
writeText()寫入文本至操作系統(tǒng)剪貼板劈伴。
瀏覽器兼容性
目前密末，各個瀏覽器廠商正在逐步開始支持 Clipboard 對象及其方法，兼容性如下：
總結(jié)
對上面所說的做一個總結(jié)：
- Clipboard 對象的方法跛璧，返回一個 Promise 對象
- Clipboard 的使用存在一定的安全限制严里，需要注意。
- 在控制臺運行 Clipboard 可能會報錯追城。
~
~
~ 本文完刹碾，感謝閱讀！
~
學(xué)習(xí)有趣的知識座柱，結(jié)識有趣的朋友迷帜，塑造有趣的靈魂物舒！
我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』戏锹，歡迎關(guān)注冠胯，希望大家多多指教！
你來景用，懷揣期望，我有墨香相迎惭蹂！ 你歸伞插，無論得失，唯以余韻相贈盾碗！
知識與技能并重媚污，內(nèi)力和外功兼修，理論和實踐兩手都要抓廷雅、兩手都要硬耗美！
