學習了clipboard復制剪切插件的使用
阿新 • • 發佈：2019-04-16
data oct tar 回復 action ack ons con width
第一步：引入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/
學習了clipboard復制剪切插件的使用