学习了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