学习了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 ...
随机推荐
- SQL SERVER 打开脚本报“未能完成操作，存储空间不足”
使用用SQLCMD命令行. 1.快捷键:win+R 2.输入cmd,确定 3.输入命令:sqlcmd -S <数据库服务器名称> -i C:\<脚本文件路径>.sql 例:s ...
- Javascript 精简语法介绍
1. 取整同时转成数值型: '10.567890'|0 结果: 10 '10.567890'^0 结果: 10 -2.23456789|0 结果: -2 ~~-2.23456789 结果: -2 2. ...
- 在SOUI中使用线性布局
SOUI 2.5.1.1开始支持线性布局(LinearLayout). 要在SOUI布局中使用线性布局, 需要在布局容器窗口里指定布局类型为vbox | hbox, (vbox为垂直线性布局, hbo ...
- UOJ#405. 【IOI2018】组合动作
原文链接https://www.cnblogs.com/zhouzhendong/p/IOI2018Day1T1.html 题解 首先二分一下,花费2次操作求出第一位的字符. 假设第一个字符是 Y,答 ...
- IDEA激活方式（亲测有效）加汉化方式
2018/12/3 最新破解方法 将0.0.0.0 account.jetbrains.com保存到本地host文件中 然后使用注册码 K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLN ...
- 微信tinker 热修复
Tinker 是微信官方的Android热补丁解决方案,它支持动态下发代码.So库以及资源,让应用能够在不需要重新安装的情况下实现更新.当然,你也可以使用Tinker来更新你的插件. github:h ...
- 常见问题：bootstrap datepicker日期插件汉化
引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...
- Git&Version Control
Git Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内 ...
- mac charles抓安卓（小米）http包
网上有很多的教程说明如何操作,都写的很好,比如 https://blog.csdn.net/luochoudan/article/details/72801573,我在这里补充一点,非常重要的一点:手 ...
- javascript的数组之join()
join()方法将一个数组(或一个类数组对象)的所有元素根据传入的参数连接成一个字符串,并返回这个字符串. var elements = ['Fire', 'Wind', 'Rain']; conso ...