最近寫一個多平臺接入的代碼焚虱，有個小需求奶是，一鍵嵌入代碼，Mark一下實現(xiàn)過程和遇到的一些問題淆储，大家共勉。
實現(xiàn)方式
搜索資料常見的就2種方式
1 第三方庫：常用的是clipboard.js
2 原生方法：document.execCommand()
簡介
1 其實支持這種需求的第方庫不是很多家浇，但是最最常用的就是clipboard.js
這是 官網(wǎng)?https://clipboardjs.com/
非常easy 這里就不在多做介紹
2 哈哈驚不驚喜本砰，意不意外，JS竟然原生支持復(fù)制到剪切板功能钢悲，但是我搜索的資料的時候点额，很多答案給人的感覺就是JS原生不支持，讓我有了JS真lower的感覺莺琳。
后來搜索文檔發(fā)現(xiàn)有個document.execCommand()方法 MDN文檔还棱，我就嘗試了幾次，我這人就喜歡實踐出真知芦昔，沒有詳細看文檔诱贿，但這樣也導(dǎo)致遇到了很多不是坑的坑娃肿，后邊會列出????咕缎。
方法介紹
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回一個Boolean值表示操作是否成功
aCommandName：表示命令名稱珠十，常見的就是copy
aShowDefaultUI：是否展示用戶界面，一般都是false
aValueArgument：額外的參數(shù)凭豪，具體看文檔吧焙蹭，我沒有使用過
書接上文，為啥之前我們(主要是我)沒有搜索到document.execCommand的相關(guān)實現(xiàn)資料呢嫂伞，因為這個方法兼容性不好孔厉，哈哈但是現(xiàn)在兼容性不錯，主流瀏覽器和移動端基本都支持
有圖有真相帖努，具體的還可以參考兼容性
html 代碼我項目用的是Vue的框架
JS
這是常見的復(fù)制輸入框的內(nèi)容撰豺。
bug 坑坑
那我如果復(fù)制其他標簽的內(nèi)容呢比方說p div span標簽內(nèi)容呢，或者直接賦值呢
這就是我上面說的不好好看文檔定義的坑拼余，(其實是咱看著英文就頭暈污桦，論會一門外語的重要性????)
重點解釋? 坑
這就不貼定義了，直接說就是定義這個方法只適用可編輯區(qū)域匙监。所以除了inout textarea標簽其他標簽是通通不行的凡橱，那咋辦呢。
一個思路
就是寫一個看不見的input亭姥，把需要復(fù)制的值賦給這個輸入框
但是這里大家注意哦 不要把input 設(shè)置hidden屬性稼钩，不要問為什么，因為血的教訓(xùn)????
其實我的理解是因為hidden隱藏了达罗，就沒辦法輸入了坝撑，就不算可編輯區(qū)了
不顯示的方法
?1 JS創(chuàng)建input標簽
const input=document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value','聽說你想復(fù)制我');
input.select();
2 CSS設(shè)置
定位等，自己嘗試吧
iOS坑
又是iOS奇葩粮揉，在前端這塊绍载，我遇到的奇葩iOS文本比安卓多。
現(xiàn)象
1 點擊復(fù)制屏幕下方會出現(xiàn)抖動滔蝉，慢動作就是鍵盤彈起來又瞬間收回去
2 無法復(fù)制
?原因?
1 因為聚焦所以鍵盤被拉起了
2 input.select()在ios下沒有選中全部內(nèi)容
解決辦法
1鍵盤失去焦點就行击儡，只讀 input.setAttribute('readonly', 'readonly')
2 設(shè)置選中內(nèi)容就行， input.setSelectionRange(0, input.value.length)
下面是自己寫文章時候的蝠引，因為文章是過了N久之后寫的阳谍，正好看了這個鏈接，所以也回憶下螃概，Mark下矫夯，希望大家都養(yǎng)成及時寫文章的習(xí)慣。
