寫在前面
有時候畔柔，我們文章中有一段經典代碼或者精彩內容，可能會被人復制引用臣樱，如果用鼠標選擇靶擦，非常不友好，尤其是移動端雇毫。這時候我們可以給該內容添加點擊事件玄捕，比如雙擊復制到粘貼板。下面我們來具體說一下實現(xiàn)方法（默認安裝了jQuey）棚放。
方案介紹
我看了很多網上的文章枚粘，目前有2種方案。
js原生方法：document.execCommand()
第三方庫：clipboard.js
下面來分別介紹這兩種方法的內容
js原生方法
第一種是使用js原生方法：document.execCommand()飘蚯。這個方法在之前的兼容性其實是不太好的馍迄，但是好在現(xiàn)在已經基本兼容所有主流瀏覽器了，在移動端也可以使用（自測ios企業(yè)微信中無法復制局骤，建議使用第二種方法）攀圈。
execCommand兼容性
定義
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
參數(shù)說明
方法返回一個 Boolean 值，如果命令不受支持或禁用峦甩，則為false赘来。
-
aCommandName：命令名稱，例如：copy，更多命令查看execCommand官方說明撕捍； -
aShowDefaultUI：是否展示用戶界面，一般情況下都是false泣洞； -
aValueArgument：對于需要輸入參數(shù)的命令忧风，是提供該信息的DOMString。
舉例說明
<div>
<label>復制內容：</label>
<input type="text" id="copy">
<button type="button" id="copybtn">復制</button>
</div>
...
<script type="text/javascript">
$(document).ready(function(){
$('#copybtn').bind('click',function () {
const input = document.querySelector('#copy');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('復制成功');
} else {
console.log('復制失敗');
}
});
});
</script>
第三方庫clipboard.js
clipboard的使用非常簡單球凰，下面舉例來說一下狮腿，更多內容可以查看clipboard官網。
引入clipboard.js庫文件
可以把該庫文件下載在本地再引用呕诉，本文直接引用clipboard官網的CDN
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
HTML和邏輯代碼
<div>
<label>復制內容：</label>
<input type="text" id="copy">
<button type="button" data-clipboard-target="#copy">復制</button>
</div>
...
<script type="text/javascript">
$(document).ready(function(){
var clipboard = new ClipboardJS('#btnCopyLink'); // 點擊按鈕復制到粘貼板
clipboard.on('success', function(e) { // 復制成功后運行函數(shù)
console.log('復制成功缘厢！');
e.clearSelection();
});
});
</script>
