学习了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 ...
随机推荐
- Spring Boot thymeleaf模版支持，css,js等静态文件添加
Thymeleaf引入 Thymeleaf是一个Java模板引擎开发库,可以处理和生成HTML.XML.JavaScript.CSS和文本,在Web和非Web环境下都可以正常工作. 1.添加依赖包 & ...
- 迭代DOM集合的几种方法
1. Array.prototype.slice.call() 转数组再遍历 var a= document.querySelectorAll('div'); var arr = Array. ...
- vue-cli按需加载，懒加载组件
vue来做一个单页面应用,当我们的项目越来越大,组件越来越多的时候,首次启动项目户特别慢,就算做一个加载框,蒙层之类的,体验也不会好,这个时候就需要按需加载 1.什么叫按需加载 所谓按需加载,顾名思义 ...
- DDoS攻击与防御（3）
3.攻击应用资源网络应用和服务在处理数据时,通常需要消耗一定的网络连接.计算和存储资源,这些资源是由应用程序向系统进行申请并自行管理和维护的.消耗应用资源的DDoS攻击就是通过向应用提交大量消耗资源的 ...
- vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...
- 动态规划——Edit Distance
大意:给定两个字符串word1和word2,为了使word1变为word2,可以进行增加.删除.替换字符三种操作,请输出操作的最少次数 Example 1: Input: word1 = &quo ...
- STL复习之 map & vector --- disney HDU 2142
题目链接: https://vjudge.net/problem/40913/origin 大致题意: 这是一道纯模拟题,不多说了. 思路: map模拟,vector辅助 其中用了map的函数: er ...
- Fragment基础操作
Fragment和Activity类似,同样是具备UI的属性:也就是都能用于规划UI布局... Building a Dynamic UI with Fragments --> Fragment ...
- react-native-splash-screen 插件 android 系统app崩溃问题
问题 react-native版本 0.53.3 react-native-splash-screen版本 3.0.6 一切配置妥当后出现如下问题: 在android studio里的调试报错为and ...
- WinIo驱动级键盘模拟编程
转自:http://blog.sina.com.cn/s/blog_455d7a320100vr37.html 前天无聊,翻翻自己的兴趣项目文件夹,发现了这个放下很久的项目!那是大三时候的事了.当时是 ...