js 复制到剪贴板--ZeroClipboard 2.0
2014-09-17 16:40
295 查看
复制到剪贴板 这个功能算是比较常见的,但是如果单纯的使用js很难做到兼容所有的浏览器,百度了一下,查到了 Zero Clipboard 这个由flash 以及 js 共同实现的库。Zero Clipboard 的最新版本是 2.1.6,但大部中文文章都是1.X的,所在在此写下2.X的使用方法。
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>
通过上述的说明,基本上是可以满足大部分复制需求了,如果还不满意,可以到官网查看详细的说明。
4000
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>
通过上述的说明,基本上是可以满足大部分复制需求了,如果还不满意,可以到官网查看详细的说明。
4000
相关文章推荐
- js 复制到剪贴板--ZeroClipboard 2.0
- JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)
- Js 复制到剪贴板,兼容各浏览器 Zero Clipboard swf
- ZeroClipboard.js复制内容到剪贴板(跨浏览器)
- 使用ZeroClipboard.js复制内容到剪贴板上
- Js 复制到剪贴板,兼容各浏览器 Zero Clipboard swf
- ZeroClipboard.js复制内容到剪贴板(跨浏览器)
- ZeroclipboardJS+flash实现将内容复制到剪贴板实例
- ZeroClipboard实现跨浏览器复制内容到剪贴板(附ZeroClipboard.js下载及使用教程)
- ZeroClipboard js复制文本(兼容全部浏览器)
- Zero Clipboard js+swf实现的复制功能使用方法
- clipboardData.setData与js常用复制到剪贴板脚本
- 【】Clipboard.js – 现代方式实现复制文本到剪贴板
- js复制兼容:ZeroClipboard复制到剪切板(支持IE、FF、Chrome)
- jQuery ZeroClipboard 复制到剪贴板功能,兼容所有浏览器
- 使用clipboard.js实现页面内容复制到剪贴板
- ZeroClipboard.js+ swf 复制网页内容(兼容所有浏览器)
- ZeroClipboard.js实现js复制功能(兼容ie9 和 ie10)
- Zero Clipboard js+swf实现的复制功能使用方法
- js ZeroClipboard 拷贝文本到剪贴板