第一步：引入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. C++\CLI语法 在项目中的使用

    通常情况下,对一个标准的com组件进行集成,网上普遍使用的方式有: 1.#import *.dll 或 #import *.ocx的方式,VS编译器重新编译后,就会自动生成组件对应的*.tlh文件,该 ...

  2. Swift 使用 日常笔记

    //------------------- var totalPrice: Int = { willSet(newTotalPrice) { //参数使用new+变量名且变量名首地址大写 printl ...

  3. Linux系统挂载Windows系统下的共享文件

    声明:本文是小编借鉴大神们的经验,仅供学习使用. 第一步:在Windows系统上选择要共享的文件夹,右击“属性”-“共享”-“高级共享”-勾选“共享此文件”-设置共享名-“权限”-“添加”-“高级”- ...

  4. Git基本操作指令

    Git是世界上目前最先进的分布式版本控制系统. 工作原理图: Workspace工作区,Index暂存区,Repository本地仓库区,Remote远程仓库. SVN与Git的最主要的区别? SVN ...

  5. 微信小程序--家庭记账本开发--03

    组件.标签以及模板的使用 在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件.标签模板的使用有了初步的了解. 1.组件 组件是数据和方法的简单封装,对于微 ...

  6. 当linux报 “-bash: fork: 无法分配内存”

    “-bash: fork: 无法分配内存”,发现连了好多终端,然后断开了一个终端,然后这边终端可以敲命令了 [root@172.16.31.105 /home/www/test]# free -m  ...

  7. python学习：格式化输出

    格式化输出 代码如下: name = input("Name:") age = input("Age:") job = input("Job:&quo ...

  8. SQL - 1.区分login、user、schema和role

        Login Login 是Server一级的概念,表示登录Server的凭证,比如在Server_A上有一个数据库DA,那么想要访问数据库DA,第一步要做的事情就是先登录到Hosting该数据 ...

  9. mysql数据库的查询，添加，删除，还原，备份

    18章数据mariadb数据库 1.setup 配置网卡centos6.52.nmtui 网卡图形配置界面3.yum install mariadb mariadb-server4.systemctl ...

  10. PHPstorm 2017激活

    网上看了很多,有用没几个.特别亲身试验了下.有一个有用的.摘录下来.备忘. 感谢该篇博文的作者.https://blog.csdn.net/veloi/article/details/71307942 ...