第一步：引入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复制剪切插件的使用的更多相关文章

  1. vi学习 常用命令-新建-复制-剪切-粘贴

    mkdir /home/brandon.du/desktop/mylinux/test_1.txt   ---------mkdir新建文件夹 rm /home/brandon.du/desktop/ ...

  2. clipboard复制剪贴板功能，以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined

    zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面 ...

  3. JS 操作复制剪切粘贴

    测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...

  4. js 实现复制剪切

    原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. wpf 复制/剪切到本地系统剪切板中以供右键粘贴用

    原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用   http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html   /// & ...

  6. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. vim选中字符复制/剪切/粘贴

    转载自:http://www.cnblogs.com/luosongchao/p/3193153.html 问题描述: vim 中选中指定字符,进行复制/剪切/粘贴 选择:1.普通模式下--v+hjk ...

  8. Linux下vi编辑器粘贴复制剪切功能

    RedHat 9.0 Linux下vi编辑器实现简单的粘贴复制剪切功能": 如果想把文件内的第三行内容黏贴到第十五行: 1.进入你的文件,(处于命令模式,而不是编辑模式) 2.将你的光标移到 ...

  9. OGG学习笔记04-OGG复制部署快速参考

    OGG学习笔记04-OGG复制部署快速参考 源端:Oracle 10.2.0.5 RAC + ASM 节点1 Public IP地址:192.168.1.27 目标端:Oracle 10.2.0.5 ...

随机推荐

  1. 金蝶k/3 现金流量表编制口诀

    现金流量表编制口诀 现金流量表是会计考试中十分令人头疼的内容,丢三落四是现金流量表编制中最容易出现的错误.下面的口诀基本上概括了现金流量表的全部编制过程.口诀的具体内容如何理解,我们在口诀后边详细阐述 ...

  2. neo4j 学习笔记

    1.参考 https://blog.csdn.net/appleyk/article/category/7408344 系列文章 (不支持 spring boo 2.0 以下的,入门可做参考) 2.底 ...

  3. php获取两个时间戳之间相隔多少天多少小时多少分多少秒

    /** * 返回两个时间的相距时间,*年*月*日*时*分*秒 * @param int $one_time 时间一 * @param int $two_time 时间二 * @param int $r ...

  4. linux 查看java的安装路径

    在linux下,如何找java的安装路径 han@ubuntu:/etc$ whereis java java: /usr/bin/java /usr/share/java /usr/lib/jvm/ ...

  5. js 30Dom应用

    1.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 给open传网址 如果是外站就加个http  <input type="button" value= ...

  6. vue处理异步请求

    vue 处理异步请求 项目中需要 先调一个接口去取到人员编号,再去调另一个借口,人员编号作为参数才能去请求数据 用setTimeout 其实也可以,先new了一个promise对象 ,把请求放在里面, ...

  7. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第6章编程练习2

    #include <iostream> #include <cctype> using namespace std; const int MAXSIZE=10; int mai ...

  8. svn提交按钮灰选

    1.当我新建了一个文件或者文件夹,要提交的时候出现ok按钮灰选,提交不了. 解决方法:提交信息多写一些字儿就可以了,挥着回车换行也行 2.报错:you need to upgrade the work ...

  9. python学习：条件语句if、else

    条件语句: 1.if...else...; 2.if...elif...esle 举例: 1.if...else... “age_of_princal = 56   guess_age = int(i ...

  10. Linux系统（和mac系统）chmod修改权限总结

    在 Mac 系统的终端上修改文件权限使用的是 Linux 中的 chmod 命令. chmod 用户+操作+权限+文件 用户部分:使用字母 u 表示文件拥有者(user),g 表示拥有者所在群组(gr ...