clipboard.js——兼容各种版本浏览器的剪切板库
来源：互联网 发布：百度大数据交响乐 编辑：程序博客网 时间：2024/05/01 18:13
需求:
我们在浏览网站时,通常有复制某段关键性文本的需求,一般情况下,我们是选中这段文本,然后ctrl + c 进行复制,但是人总是很懒的,比如说我,连这两个操作都不愿意做,我仅仅只想把点击一下某个按钮或者点击下改文本就可以复制到剪切板,这样可以节约我的时间.
解决方案:
将文本复制到剪切板是前台js的事,但是浏览器众多,怎么才能兼容各种版本的浏览器,让我们轻松写出一键复制到剪切板的js代码.这时就该clipboard.js出场了.
clipboard.js是一个github上的开源项目，clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+
clipboard.js项目主页:https://github.com/zenorocha/clipboard.js
代码演示:
先给大家看一个在线示例:http://demo.jb51.net/js/2015/clipboard/,代码如下:
<script src="clipboard.min.js"></script> <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea><!-- Trigger --><button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar"> Cut to clipboard</button><script>var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger);alert("复制成功"); e.clearSelection();});clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});</script><!-- 官方实例二： --><script src="dist/clipboard.min.js"></script><button class="btn"><script type="text/javascript">var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection();});clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});</script>我的测试案例:1.button内部文本测试
<!DOCTYPE html><html><head><title>ZeroClipboard Test</title><meta charset="utf-8"><script type="text/javascript" src="clipboard.min.js"></script><script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><body><!--测试1--><!--button按钮测试，需要复制的值放在属性 data-clipboard-text中--><button class="btn1" data-clipboard-text="测试1">点击测试1</button><br><br></body></html><script type="text/javascript"><!--测试1-->$(document).ready(function(){ var clipboard1 = new Clipboard('.btn'); clipboard1.on('success', function(e) { console.log(e); alert("测试1复制成功！") }); clipboard1.on('error', function(e) { console.log(e); alert("测试1复制失败！请手动复制") });})</script>
2.div内部文本测试<!DOCTYPE html><html><head><title>ZeroClipboard Test</title><meta charset="utf-8"><script type="text/javascript" src="clipboard.min.js"></script><script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><body>在这里粘贴:<textarea id="textarea"></textarea><br><!--测试2--><!--a按钮测试，需要复制的值放在属性 data-clipboard-text中<br>--><a class="a" data-clipboard-text="测试2">点击测试2</a><br><br></body></html><script type="text/javascript"><!--测试2-->$(document).ready(function(){ var clipboard2 = new Clipboard('.a'); clipboard2.on('success', function(e) { console.log(e); alert("测试2复制成功！") }); clipboard2.on('error', function(e) { console.log(e); alert("测试2复制失败！请手动复制") });})</script>3.div内部文本测试
<!DOCTYPE html><html><head><title>ZeroClipboard Test</title><meta charset="utf-8"><script type="text/javascript" src="clipboard.min.js"></script><script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><body>在这里粘贴:<textarea id="textarea"></textarea><br><!--测试3--><!--测试，通过按钮的data-clipboard-target属性获取指定标签中的值--><div>测试3</div> <button class="btn3" data-clipboard-action="copy" data-clipboard-target="div">点击测试3</button><br><br></body></html><script type="text/javascript"><!--测试3-->$(document).ready(function(){ var clipboard3 = new Clipboard('.btn3'); clipboard3.on('success', function(e) { console.log(e); alert("测试3复制成功！") }); clipboard3.on('error', function(e) { console.log(e); alert("测试3复制失败！请手动复制") });})</script>
4.文本框测试<!DOCTYPE html><html><head><title>ZeroClipboard Test</title><meta charset="utf-8"><script type="text/javascript" src="clipboard.min.js"></script><script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><body>在这里输入文字:<textarea id="textarea1"></textarea><br>在这里粘贴<textarea id="textarea2"></textarea><br> <!--测试4--> <!--测试，通过按钮的data-clipboard-target属性获取指id的标签中的值中 --> <button class="btn4" data-clipboard-action="copy" data-clipboard-target="#textarea1">点击测试4</button></body></html><script type="text/javascript"><!--测试4-->$(document).ready(function(){ var clipboard4 = new Clipboard('.btn4'); clipboard4.on('success', function(e) { console.log(e); alert("测试4复制成功！") }); clipboard4.on('error', function(e) { console.log(e); alert("测试4复制失败！请手动复制") });})</script>
0 0
- clipboard.js——兼容各种版本浏览器的剪切板库
- 向剪切板复制文本的js库——clipboard.js
- 微信浏览器-复制到剪切板-clipboard.js插件
- summernote的兼容ie的剪切板实现-clipboard
- 简单解决——使用Clipboard实现剪切板，用require引入js资源，会报错Clipboard is not defined的问题
- 兼容各浏览器的Zero Clipboard js+swf实现的复制功能使用方法
- angularjs-兼容各种浏览器的复制到剪切板功能的代码
- Clipboard 剪切板的应用&&Action
- js粘贴复制, js动态复制到剪切板,兼容浏览器
- 兼容低版本的浏览器各种汇总（未完待续）
- js实现复制到剪切板，兼容所有浏览器
- js实现复制到剪切板功能，兼容所有浏览器
- JS复制到剪切板（兼容主流所有浏览器）
- Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能
- java 剪切板 clipboard.js 与 ZeroClipboard.swf
- Android进程间通讯——Clipboard(剪切板)
- 剪切板clipboard
- JS兼容各种浏览器的回车事件监控
- 12.1 浅克隆与深克隆
- Android 动画完全解析
- jQuery笔记之事件
- [NOIP] [组合数学] NOIP2016Day2 组合数问题
- JavaScript的引用类型
- clipboard.js——兼容各种版本浏览器的剪切板库
- 用户线程、守护线程、线程的join()方法
- unity5之导航网格寻路系统-1Bake（烘培）
- 求奖金总数
- Java基础（三）Java循环语句和各种对象的遍历之(三)
- 一个可能的C++primer Plus第164页第6题的答案
- Apache/Tomcat/JBOSS/Neginx/lighttpd/Jetty
- Linux VI编辑&退出
- JavaScript学习(2)--Array数组
