學習了clipboard複製剪切插件的使用

時間 2019-11-30

標籤學習 clipboard 複製剪切插件使用简体版

原文原文鏈接

第一步：引入clipboard插件JSjavascript

<script src="dist/clipboard.min.js"></script>

第二步：在HTML代碼加入clipboard相關屬性html

<!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標籤。java

data-clipboard-target：是用來綁定要複製的目標HTML標籤，能夠是class或id；測試

data-clipboard-text：是用來設置要複製或者剪切的文本內容的屬性；spa

data-clipboard-action：是用來設置複製或者剪切事件的，能夠是copy或cut，如不填默認爲copy；
插件

咱們能夠實例化一個ClipboardJS類，用on綁定clipboard自帶的成功和失敗事件，用console.log打印出插件的相關參數進行調試。調試

注意：親自測試發如今某些狀況下若是沒有設置data-clipboard-text屬性會出現不能正常複製內容的狀況，能夠用data-clipboard-text設置要複製的內容從而解決問題。code

在使用過程當中如遇到困難歡迎在下方留言諮詢，看到後第一時間進行回覆。謝謝。htm

附上clipboard插件的官網連接：https://clipboardjs.com/blog

相關文章

相關標籤/搜索

不使用插件

經常使用 JS 插件

xcode5的使用

Docker的使用

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<