学习了clipboard复制剪切插件的使用
第一步：引入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复制剪切插件的使用的更多相关文章
- vi学习 常用命令-新建-复制-剪切-粘贴
mkdir /home/brandon.du/desktop/mylinux/test_1.txt ---------mkdir新建文件夹 rm /home/brandon.du/desktop/ ...
- clipboard复制剪贴板功能，以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined
zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面 ...
- JS 操作复制剪切粘贴
测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...
- js 实现复制剪切
原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- wpf 复制/剪切到本地系统剪切板中以供右键粘贴用
原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用 http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html /// & ...
- js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vim选中字符复制/剪切/粘贴
转载自:http://www.cnblogs.com/luosongchao/p/3193153.html 问题描述: vim 中选中指定字符,进行复制/剪切/粘贴 选择:1.普通模式下--v+hjk ...
- Linux下vi编辑器粘贴复制剪切功能
RedHat 9.0 Linux下vi编辑器实现简单的粘贴复制剪切功能": 如果想把文件内的第三行内容黏贴到第十五行: 1.进入你的文件,(处于命令模式,而不是编辑模式) 2.将你的光标移到 ...
- 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 ...
随机推荐
- cc.Component 的使用
1.组件入口函数,常有的:onLoad,start,update //组件在加载的时候运行,并且场景的初始化工作已经完成 onLoad() { }, //组件在第一次update调用之前调用 star ...
- CSS使用小记
1. 省略显示 max-width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 固定宽度,nowra ...
- 学习笔记: Expression表达式目录树详解和扩展封装
1. 表达式链接扩展封装,ORM常用 And Or /// <summary> /// 表达式访问者 /// </summary> public class Expressi ...
- Elasticsearch 简单快照备份
创建仓库 POST http://10.10.14.201:9200/_snapshot/backup { "type": "fs", "settin ...
- codeforces 493 div1 e
题解: 和这件zhcs的那题有点像 第一种做法是考虑i,i+1之间的贡献 这样子就是矩形加减然后求矩形最小值个数 另一种做法是我们从左向右维护mx-nx-r+l 跟之前那题一样我们知道这个的最小值为0 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（任务管理系统）-1项目说明
https://www.bug2048.com/netcore20180313/ 最近公司的一个小项目尝试使用 .net core作为服务端进行开发,并顺利上线运行了一段时间,整体效果还是比较满意的. ...
- yum clear all无反应
卸载重装yum 操作系统版本:centos7 [root@linux-node3 ~]# uname -r 3.10.0-514.el7.x86_64 一.将现有的yum源卸载 [root@linux ...
- [POJ2965]The Pilots Brothers' refrigerator (搜索/位运算)
题意 游戏“The Pilots Brothers:跟随有条纹的大象”有一个玩家需要打开冰箱的任务. 冰箱门上有16个把手.每个手柄可以处于以下两种状态之一:打开或关闭.只有当所有把手都打开时,冰箱才 ...
- 小甲鱼Python第二十讲课后习题---021
笔记: 1.lambda表达式的作用: 1)Python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写一个简单的脚本来管理服务器时间,我们就不需要专门定义一个函数然后 ...
- NOIP-无线网路发射器选址
题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129条东西向街道和129条南北向街道所形成的网格状,并且相邻的平 ...