第一步：引入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. OrCAD Capture CIS 16.6 将版本16.6的设计文件另存为版本16.2的设计文件

    操作系统:Windows 10 x64 工具1:OrCAD Capture CIS 16.6-S062 (v16-6-112FF) 启动OrCAD Capture CIS,打开.dsn设计文件,右击该 ...

  2. 快速搭建MQTT服务器(MQTTnet和Apache Apollo)

    前言 MQTT协议是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分,http://mqtt.org/. MQTT is a machine-to-machine (M2M)/" ...

  3. 初始Mkaefile

    初识MakefIle 在学习Linux过程中,我越发的觉得Linux系统给了使用者更大的自由,同时也就增加了学习的成本.在gcc下去调试代码,没有了熟悉的VS,没有的人性话的错误提示(当然Makefi ...

  4. Kali Linux常用服务配置教程获取IP地址

    Kali Linux常用服务配置教程获取IP地址 下面以Kali Linux为例,演示获取IP地址的方法 (1)设置网络接口为自动获取IP地址.在Kali Linux的收藏夹中单击图标,将显示所有的程 ...

  5. oracle12 group by 拼接字符串

    select listagg(合并字段,'连接符号') within group (order by 排序字段) as 别名 from 表 group by 字段

  6. 阿里云 Windows 2012 如果安装IIS

    用可视化安装如果出错, 那就用 windows powershell 安装 https://help.aliyun.com/knowledge_detail/40959.html?spm=5176.1 ...

  7. HTML入门2

    开始将注意力转移到具体的元素里和页面了. 在页面加载完成的时候,标签head里的内容不会显示出来,包含了页面的title和css样式以及一些元素据信息,比如作者,描述文档,下面将具体分析html文档里 ...

  8. css页面滚动触发动画

    参考页面:http://www.jq22.com/jquery-info1384

  9. 20 由属性查询学习到的ArcMap、javaScripts API相关操作

    因项目需要,想要在属性查询的时候连同相关的图片一并查出来,但是因为要查询的图层众多,且字段不固定,而且还要方便后期维护,因此一个个单独配置并不是最优的解决方法 为实现这个功能,我想到如下几种解决方法 ...

  10. 简化equals()方法的重写

    实例说明 在定义类时,属性可以是基本类型也可以是引用类型.当重写equals()方法时一会要用“==”来比较基本类型,一会要用equals()比较引用类型,这样代码看着有些混乱.为此推荐使用Commo ...