clipboard.js实现点击复制网页内容到剪切板（兼容主流所有浏览器）
clipboard.js利用一个非常小的JS文件来实现兼容目前所有主流浏览器的点击复制数据到剪切板功能，跟现在主流的zeroclipboard 比起来简单易用许多(毕竟现在flash漏洞那么多，而且HTML5也是不用FLASH了)
这个实现方式主要用到github上的一个开源的项目:clipboard.js （项目地址:https://github.com/zenorocha/clipboard.js/archive/master.zip）官方地址:https://clipboardjs.com/
下面看一个DEMO
首先引入依赖JS包:
<script src="../clipboard.min.js"></script>
然后实例化clipboard(clipboard实例化需要指定一个元素,也就是点击指定元素会触发复制方法)
var clipboard = new ClipboardJS('.btn');下面是一份完整DEMO:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target-textarea</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 数据区 定义ID名为bar-->
<textarea id="bar">hello</textarea>
<!-- 点击按钮 则引用ID名为bar的内容,cut方法是剪切走-->
<button data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
<!-- 引入脚本文件 -->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.0/clipboard.min.js"></script>
<!-- 脚本方法 -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>这样就可以简单的完成对主流浏览器进行JS复制的操作了.
DEMO地址:https://www.bnxb.com/demo/other/clipboard.min.html
本例子只是做出了一个基础的操作,
如果想深入了解请到clipboard.js官方网站了解详情, 防止失效，附件上传
顶(4)
踩(0)
- 最新评论