第一步：引入clipboard插件JS 第二步：在HTML代碼加入clipboard相關屬性 其中data-clipboard-target、data-clipboard-text、data-clipboard-action是clipboard插件自帶的屬性，id和class可以自己任選一個用來調用 ...
第一步：引入clipboard插件JS
<script src="dist/clipboard.min.js"></script>
第二步：在HTML代碼加入clipboard相關屬性
<!DOCTYPE html> <html> <head> <title>測試頁面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="/js/clipboard.min.js" type="text/javascript"></script> </head> <body> <div id="clip" class="clip" data-clipboard-action="copy" data-clipboard-target=".clip" data-clipboard-text="在這裡填寫要複製的內容也可以">這裡填寫要複製的內容</div> </body> <script> var clipboard = new ClipboardJS('.clip'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </html>
其中data-clipboard-target、data-clipboard-text、data-clipboard-action是clipboard插件自帶的屬性，id和class可以自己任選一個用來調用要複製的HTML標簽。
data-clipboard-target：是用來綁定要複製的目標HTML標簽，可以是class或id；
data-clipboard-text：是用來設置要複製或者剪切的文本內容的屬性；
data-clipboard-action：是用來設置複製或者剪切事件的，可以是copy或cut，如不填預設為copy；
我們可以實例化一個ClipboardJS類，用on綁定clipboard自帶的成功和失敗事件，用console.log列印出插件的相關參數進行調試。
註意：親自測試發現在某些情況下如果沒有設置data-clipboard-text屬性會出現不能正常複製內容的情況，可以用data-clipboard-text設置要複製的內容從而解決問題。
在使用過程中如遇到困難歡迎在下方留言咨詢，看到後第一時間進行回覆。謝謝。
附上clipboard插件的官網鏈接：https://clipboardjs.com/
