js复制到剪贴板,兼容ie

转载自点击打开链接

对于一般技术类的用户来说这没什么，但是对于那些非技术类的人来说，反而会觉得比较麻烦。因此从实用性和提高用户体验的角度出发，得给用户直接复制粘贴到剪切板的功能。今天介绍一个实现此功能的小插件，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){

        //ie自身的处理方式

        var copyBtn = document.getElementById("copy");

        copyBtn.onclick = function(){ 

            var text = $("#copy").attr("data-clipboard-text");

            window.clipboardData.setData('text',text); 

            alert("复制成功，地址为： " + text);

        } 

    }else{//ZeroClipboard插件的处理方式

        var client = new ZeroClipboard(document.getElementById("copy"));

        client.on("ready", function(readyEvent) {

            client.on("aftercopy", function(event) {

                alert("复制成功，地址为: " + event.data["text/plain"]);

            });

        });

    }