第一步：引入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. 关于在windows上远行的虚拟机为ubuntu16.04中不能复制和粘贴的问题解决方案

    Linux安装 VMware tools 工具解决复制和粘贴的方法 VMware虚拟机中如何安装VMWare-Tools详解好处:可以支持图形界面,可以支持共享文件功能等 1 工具/原料 1)安装过虚 ...

  2. 金蝶k3wise 核算项目、辅助资料

    金蝶k3wise 核算项目.辅助资料 ----核算项目信息 select * from t_ItemClass ----核算项目字段信息 --锁定字段 ----核算项目内容表 select * fro ...

  3. js-事件以及window操作

    属性 当以下情况发生时,出现此事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfocus 元素获得焦 ...

  4. 关于jmeter读取CSV文件的详细设置

    jmeter 读取excel数据使用的方法是使用Jmeter CSV Data Set Config参数化 但是将excel文件保存成csv格式后,jmeter读取后返回的数据总是出现乱码问题, 以下 ...

  5. react学习一篇就够了

    webstrom自动格式化代码 命令 js框架 MVC 安装 npm install create-react-app -g 生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/) cr ...

  6. django——面试题(已工作，暂停更新)

    谈谈你对HTTP协议的认识. 什么是协议? 协议,是指通信的双方,在通信流程或内容格式上,共同遵守的标准. 什么是http协议? http协议,是互联网中最常见的网络通信标准. http协议的特点 ① ...

  7. Spring+Hibernate实现动态SessionFactory切换(改进版)

    前面写了一篇关于动态切换Hibernate SessionFactory的文章 发现存在一些问题: 需要配置多个HibernateTransactionManager和多个Spring 切面 这样带来 ...

  8. python的array初识

    from array import array """ 'b' signed char int 1 'B' unsigned char int 1 'u' Py_UNIC ...

  9. 渲染引擎 & 页面渲染流程 & 阻塞

    文档对象模型(Document Object Model,简称DOM) 浏览器渲染引擎 一个渲染引擎 主要模块: HTML 解析器 解释 HTML 文档的解析器,将 HTML 文本 解析成 DOM 树 ...

  10. WebService的两种方式SOAP和REST有什么不同？

    REST API 优点: 1. 轻量级的解决方案,不必向SOAP那样要构建一个标准的SOAP XML. 2. 可读性比较好:可以把URL的名字取得有实际意义. 3. 不需要SDK支持:直接一个Http ...