第一步：引入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. iOS开发多线程之NSThread

    一.NSThread的属性与方法 1.NSThread 类方法 类方法,顾名思义通过类名直接调用的方法 1. + (void)detachNewThreadWithBlock:(void (^)(vo ...

  2. MySql+EF <二>

    C#使用Mysql+EF架构项目有一系列问题. 一.EF没有Mysql的驱动,这个需要自己安装2个插件 ①mysql-connector-net-6.9.10.msi ②mysql-for-visua ...

  3. 一起学爬虫——urllib库常用方法用法总结

    1.读取cookies import http.cookiejar as cj,urllib.request as request cookie = cj.CookieJar() handler = ...

  4. SpringCloud教程 | 第一篇: 服务的注册与发现

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  5. Spring Cloud微服务笔记（一）微服务概念

    微服务概念 一.什么是微服务架构 微服务,是一个小的.松耦合的分布式服务. 为什么需要微服务: 1)单体系统部署在一个进程中,修改了一个小功能,为了部署上线就会影响其他功能. 2)单体应用各个功能模块 ...

  6. Python-Django学习

    1,安装Django与python版本的对应1.8 2.7,3.2--3.51.9,1.10 2.7,3.4,3.51.11 2.7,3.4,3.5,3.62.0 2.1 第一种安装:pip inst ...

  7. docker 常用启动命令

    数据库 # mongo sudo docker run -d -p 27017:27017 -v mongo_configdb:/data/configdb -v mongo_db:/data/db ...

  8. JS基础学习3

    1.控制语句 (1)if控制语句 if-else基本格式 if (表达式){ 语句1; ...... }else{ 语句2; ..... } 功能说明 如果表达式的值为true则执行语句1, 否则执行 ...

  9. Wireshark简单使用教程2——附视频

    视频链接https://www.bilibili.com/video/av35336089/ 目录 对抓取的流量包进行简单的说明 Wireshark的捕获过滤器和显示过滤器 内容 1.对抓取的流量包进 ...

  10. 变量类型-Tuple

    教程:一:元组的创建        元组(tuple)与列表类似,不同之处在于元组的元素不能修改    (1)tuple写在圆括号之间,元素用逗号隔开    (2)元组元素的类型可以不同    (3) ...