js 复制到剪贴板--ZeroClipboard 2.0
来源:互联网 发布:js delete 编辑:程序博客网 时间:2024/05/16 03:05
ZeroClipboard:
是一套提供了将文本复制到剪贴板的类库,它通过使用不可见的 Adobe Flash movie(这里的不可见我的理解是透明,因为查看页面结构时发现他是覆盖在我们写的 “复制”按钮之上的) 和 js接口 来实现的。这个 “Zero”意味这看不到,不会影响我们的页面,页面结构或都说视图效果还是按我们的意愿来定义。
局限:
由于浏览器和flash的安全限制,只有当用户点击不可见的flash movie时才能实现对剪贴板内容的修改,js模拟的点击是不可以的,这个可能导致剪贴板中毒。
还有一些限制,如:复制时同时有其他程序对剪贴板操作的问题 以及 客户端的操作系统的问题,感觉一般不会遇到,因为大部分用的都是Window,在此就不进行说明了,如果遇到些类问题可以点此查看。
下载
到http://zeroclipboard.org/或https://github.com/zeroclipboard/ZeroClipboard下载2.1.6的。
使用样例(对官网例子的修改)
调用前在页面中引入js,并为ZeroClipboard配置Adobe Flash movie。
<script type="text/javascript" src="{resourceRoot}/pubjs/ZeroClipboard/ZeroClipboard.min.js"></script>
<script type="text/javascript">
// 如果ZeroClipboard.min.js与ZeroClipboard.swf在同一个目录下可以不配,
// 但可能会因为引用ZeroClipboard.min.js的页面所在目录不同,会找不到ZeroClipboard.swf,建议
// 在此为ZeroClipboard配上全路径
ZeroClipboard.config( { swfPath: "{resourceRoot}/pubjs/ZeroClipboard/ZeroClipboard.swf" } );
</script>
1)最简单
1.1)使用data-clipboard-text 属性
<button id="copy-button" data-clipboard-text="要复制的文字" title="Click to copy me.">复制到剪贴板</button>
<script type="text/javascript">
var client = new ZeroClipboard( document.getElementById("copy-button") );
</script>
这样点击按钮【复制到剪贴板】 就可以将 “data-clipboard-text” 的值 赋值到剪贴板。
1.2)使用“data-clipboard-target”属性。
<button id="copy-button" data-clipboard-target='copyTextTagId' title="Click to copy me.">复制到剪贴板</button>
<input id="copyTextTagId" value="要复制的文字" />
<script type="text/javascript">
var client = new ZeroClipboard( document.getElementById("copy-button") );
</script>
这样点击按钮【复制到剪贴板】 就可以将id为 “data-clipboard-target” 值的标签的内容 赋值到剪贴板。
2)复杂点的
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<div class="clip_button">Copy To Clipboard</div>
<div class="clip_button">Copy This Too!</div>
<script type="text/javascript">
var client = new ZeroClipboard( $('.clip_button') ); // 可以用jquery对象
client.on( 'ready', function(event) { // 加载swf
// console.log( 'movie is loaded' );
client.on( 'copy', function(event) {
// 添加复制操作
event.clipboardData.setData('text/plain', event.target.innerHTML);
} );
client.on( 'aftercopy', function(event) {
// 复制操作
console.log('Copied text to clipboard: ' + event.data['text/plain']);
} );
});
client.on( 'error', function(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
});
</script>
通过上述的说明,基本上是可以满足大部分复制需求了,如果还不满意,可以到官网查看详细的说明。
- js 复制到剪贴板--ZeroClipboard 2.0
- js复制文本到剪贴板,使用ZeroClipboard
- ZeroClipboard-复制到剪贴板
- ZeroClipboard 复制内容到剪贴板
- ZeroClipboard.js复制内容到剪贴板(跨浏览器)
- JS实现复制数据到剪贴板,zeroclipboard库
- JavaScript利用ZeroClipboard 复制到剪贴板。
- ZeroClipboard复制内容到剪贴板的使用
- 使用ZeroClipboard 复制内容到剪贴板
- [ZeroClipboard] 跨浏览器复制到剪贴板
- js ZeroClipboard 拷贝文本到剪贴板
- js复制到剪贴板
- JS 复制到剪贴板
- js复制到剪贴板
- ZeroClipboard支持IE,firefox,Chrome复制到剪贴板
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 .
- 软件性能测试基础
- Android中View转换为Bitmap及getDrawingCache=null的解决方法
- python系列之数据处理编程实例
- 体验安装金蝶K/3 Wise 13.0(图文)
- 原来泛型很简单
- js 复制到剪贴板--ZeroClipboard 2.0
- 整数数组的组合问题
- HDU 5006 Resistance 物理 高斯消元
- MyBatis中关于resultType和resultMap的区别
- PHP输入流php://input $HTTP_RAW_POST_DATA $_POST
- c++学习笔记——一种非法的类型转换
- OpenGL之路(三)基本练习
- 查找并删除文件
- Open vSwitch框架解析