JAVA高级面试进阶训练营视频教程

admin

复制到剪贴板的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库。

<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会提示用户是否允许访问剪贴板。

　　以上所有代码仅写出了关键核心的部分，如有问题，欢迎交流吐槽！