复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)
2014-09-09 11:21
676 查看
复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)
相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能。但是由于各大浏览器的实现方案不一样,导致几乎没有统一的实现这样功能的方案。而被各大程序猿喜欢的jQuery也没有类似的方法或者函数来实现这一功能。包括博客园这样的技术博客区对代码的复制,也没有直接复制到剪贴板,需要用户自己去手动ctrl+c。如下:
对于一般技术类的用户来说这没什么,但是对于那些非技术类的人来说,反而会觉得比较麻烦。因此从实用性和提高用户体验的角度出发,得给用户直接复制粘贴到剪切板的功能。今天介绍一个实现此功能的小插件,ZeroClipboard,同时兼讨论解决它在IE下不能使用的问题(我用的IE10)。
1、下载jQuery,可自行百度谷歌。
2、下载ZeroClipboard,Zero Clipboard的官方地址:http://zeroclipboard.org/,github地址:https://github.com/zeroclipboard/ZeroClipboard
3、添加js库。
4、html代码。
5、JS代码
好了,酱紫功能就完成了。效果如下:
当然了,我这里只是粘贴了我写死的内容,你完全可以根据你的需求来复制内容到剪贴板用户输入的内容或者其它内容。这你可以根据官方的API可以找到对应的使用方法。
在各大浏览器包括谷歌浏览器、火狐以及一些国产的浏览器里测试都没问题。但是每次讨论到IE,问题就来了,当在IE浏览器(我用的IE10)打开的时候却出现了问题,点击没有效果。而谷歌里搜索也发现其他人也有类似的问题,不明觉厉。然后查看了IE实现复制到剪贴板的实现方法,并重新优化了下上面的JS代码,兼容了IE。修改过后的JS代码如下:
OK,搞定!现在在IE里也能正常使用了。效果如下:
不过在IE中出于安全考虑,IE会提示用户是否允许访问剪贴板。
以上所有代码仅写出了关键核心的部分,如有问题,欢迎交流吐槽!
相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能。但是由于各大浏览器的实现方案不一样,导致几乎没有统一的实现这样功能的方案。而被各大程序猿喜欢的jQuery也没有类似的方法或者函数来实现这一功能。包括博客园这样的技术博客区对代码的复制,也没有直接复制到剪贴板,需要用户自己去手动ctrl+c。如下:
对于一般技术类的用户来说这没什么,但是对于那些非技术类的人来说,反而会觉得比较麻烦。因此从实用性和提高用户体验的角度出发,得给用户直接复制粘贴到剪切板的功能。今天介绍一个实现此功能的小插件,ZeroClipboard,同时兼讨论解决它在IE下不能使用的问题(我用的IE10)。
1、下载jQuery,可自行百度谷歌。
2、下载ZeroClipboard,Zero Clipboard的官方地址:http://zeroclipboard.org/,github地址:https://github.com/zeroclipboard/ZeroClipboard
3、添加js库。
<script src="jQuery.js" type="text/javascript"></script> <script src="ZeroClipboard.js" type="text/javascript"></script> <script src="clip.js" type="text/javascript"></script><!-- 你测试或者使用的js -->
4、html代码。
<a title="点击复制当前链接" href="javascript:void(0);" data-clipboard-text="粘贴内容" id="copy"></a> <!-- 其中id用于js选择器使用,data-clipboard-text用于保存你要粘贴的内容-->
5、JS代码
var client = new ZeroClipboard(document.getElementById("copy")); client.on("ready", function(readyEvent) { client.on("aftercopy", function(event) { alert("复制成功,地址为: " + event.data["text/plain"]); }); });
好了,酱紫功能就完成了。效果如下:
当然了,我这里只是粘贴了我写死的内容,你完全可以根据你的需求来复制内容到剪贴板用户输入的内容或者其它内容。这你可以根据官方的API可以找到对应的使用方法。
在各大浏览器包括谷歌浏览器、火狐以及一些国产的浏览器里测试都没问题。但是每次讨论到IE,问题就来了,当在IE浏览器(我用的IE10)打开的时候却出现了问题,点击没有效果。而谷歌里搜索也发现其他人也有类似的问题,不明觉厉。然后查看了IE实现复制到剪贴板的实现方法,并重新优化了下上面的JS代码,兼容了IE。修改过后的JS代码如下:
if(window.clipboardData){ //for IE var copyBtn = document.getElementById("copy"); copyBtn.onclick = function(){ var text = $("#copy").attr("data-clipboard-text"); window.clipboardData.setData('text',text); alert("复制成功,地址为: " + text); } }else{ var client = new ZeroClipboard(document.getElementById("copy")); client.on("ready", function(readyEvent) { client.on("aftercopy", function(event) { alert("复制成功,地址为: " + event.data["text/plain"]); }); }); }
OK,搞定!现在在IE里也能正常使用了。效果如下:
不过在IE中出于安全考虑,IE会提示用户是否允许访问剪贴板。
以上所有代码仅写出了关键核心的部分,如有问题,欢迎交流吐槽!
相关文章推荐
- js实现复制到系统剪贴板之IE,firefox兼容版
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- ZeroClipboard实现复制功能(兼容各浏览器终极解决办法)
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- jquery实现图片等比例缩放,解决max-width在ie中不兼容问题
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- window.location.reload()--解决JS页面跳转ie,firefox,opera不兼容问题
- js 复制到剪贴板 ,兼容支持火狐firefox 和 ie
- JS在IE version 不兼容的某些问题解决
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 复制到剪贴板的js代码(兼容ie、firefox、chorme、safari...什么都兼容!)
- js实现兼容IE和FF的复制功能
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- JS页面跳转ie,firefox,opera不兼容问题的解决
- 解决JS:window.close()在Firefox下的不能关闭的问题,兼容IE/Firefox/Chrome