js插件实现点击复制内容到粘贴板 兼容IE8

效果图:

点击复制链接,复制输入框的内容到粘贴板上。下面是html代码,比较粗糙。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" value="www.baidu.com" id="link"> 
        <span id="copyBtn">复制链接</span> 
        <script src="jquery.min.js"></script>
        <script src="jquery.zclip.js"></script>
        <script>
        
            $('#copyBtn').zclip({ 
                path: "zeroClipboard.swf", 
                copy: function(){ 
                    return $('#link').val(); 
                },
                afterCopy:function(){/* 复制成功后的操作 */
                    alert("复制成功!");
                }
            }); 
        </script>
    </body>
</html>

再来看,里面一共需要导入三个文件:

第一个是jquery.js,这个不多说;

第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www.bootcdn.cn/zclip/

那么如何使用上面链接 呢?

1. 复制上面链接在浏览器打开,其中zeroClipboard.swf打开会直接下载,如果你的浏览器不会直接下载,可以ctrl+s保存到本地,下载成功后会提示下面的信息,点击“保留”即可,然后复制到项目制定目录下(path配置项的路径可是该目录的绝对路径,也可以是相对路径,我在调试的时候发现,直接复制上面链接放在path里面会报错的。)

                                                      

2.插件的话,根据需要下载源文件还是压缩文件,这里下载的是  jquery.zclip.js,下载方法同上(复制链接打开,ctrl+s保存在本地,可以直接使用该链接)。

扫描二维码关注公众号,回复: 1569670 查看本文章

猜你喜欢

转载自www.cnblogs.com/stella1024/p/9172699.html