复制到剪贴板的JS实现--ZeroClipboard （兼解决IE下兼容问题）

时间 2019-11-26 标签复制剪贴板 js 实现 zeroclipboard 兼解决兼容问题

复制到剪贴板的JS实现--ZeroClipboard （兼解决IE下兼容问题）javascript

　　相信绝大多数人都遇到过这样的功能实现，“复制”或者“复制到剪贴板”这样的功能。可是因为各大浏览器的实现方案不同，致使几乎没有统一的实现这样功能的方案。而被各大程序猿喜欢的jQuery也没有相似的方法或者函数来实现这一功能。包括博客园这样的技术博客区对代码的复制，也没有直接复制到剪贴板，须要用户本身去手动ctrl+c。以下：html

　　对于通常技术类的用户来讲这没什么，可是对于那些非技术类的人来讲，反而会以为比较麻烦。所以从实用性和提升用户体验的角度出发，得给用户直接复制粘贴到剪切板的功能。今天介绍一个实现此功能的小插件，ZeroClipboard，同时兼讨论解决它在IE下不能使用的问题（我用的IE10）。java

　　一、下载jQuery，可自行百度谷歌。git

　　二、下载ZeroClipboard，Zero Clipboard的官方地址：http://zeroclipboard.org/，github地址：https://github.com/zeroclipboard/ZeroClipboardgithub

　　三、添加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 -->

　　四、html代码。安全

<a title="点击复制当前连接" href="javascript:void(0);" data-clipboard-text="粘贴内容" id="copy"></a>
<!-- 其中id用于js选择器使用，data-clipboard-text用于保存你要粘贴的内容-->

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

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