• 学习了clipboard复制剪切插件的使用


    第一步:引入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/

    个人网站:http://shibowl.top
    github:https://github.com/hanbinjxnc
    博客园:https://www.cnblogs.com/hool
    个人博客:https://blog.shibowl.top
    作者:世博 2019年4月28日
  • 相关阅读:
    Java String 字符串操作小结
    找到一篇关于 Oracle 全文检索实践 的文章
    Java中Array与ArrayList的主要区别
    Java使用Array类创建多维数组
    [例] 用MappedByteBuffer更新文件内容
    java nio 之MappedByteBuffer
    Java.util.Properties类
    Oracle外连接与条件的组合
    Oracle 树形SQL语句,SYS_CONNECT_BY_PATH 函数
    SQL Connect By 的例子
  • 原文地址:https://www.cnblogs.com/hool/p/10718191.html
Copyright © 2020-2023  润新知