关于使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

最新推荐文章于 2025-09-06 18:40:05 发布

xiaowu108

最新推荐文章于 2025-09-06 18:40:05 发布

阅读量842

点赞数

CC 4.0 BY-SA版权

分类专栏：开发遇到的浏览器兼容问题文章标签： ZeroClipboard 剪贴板浏览器 flash chrome

本文链接：https://blog.youkuaiyun.com/xiaowu108/article/details/40461225

开发遇到的浏览器兼容问题专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用ZeroClipboard.js和ZeroClipboard.swf插件实现在不同浏览器中复制文本框内容到剪贴板的方法，并提供了一个实际运行的例子。

最近在做点击按钮把文本框的内容复制到剪贴板的功能，遇到各种浏览器兼容问题，真是要抓狂了，几经周折终于成功解决了目前比较主流的浏览器（IE、Firefox、Chrome、360）等兼容问题。

1、我用的是一个开源的js插件:ZeroClipboard.js 和 ZeroClipboard.swf，其实他的实现原理是：利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。

2、请大家注意事项：做这个测试的时候一定是要放在一个正在运行于web服务器（例如：tomcat、weblogic等等）的项目上，否则就不会达到预期效果，通俗的说就是不能在Dreamweaver、Editplus等网页开发工具上进行测试。

3、下面把我做的一个Demo给大家看看：

4、代码运行的效果如下：

5、源代码如下（注意：下面标识红色部分的代码为我引用的外部文件）：

         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Zero Clipboard Test</title>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/ZeroClipboard.js"></script>
    <script language="JavaScript">
       var clip = null;
       $(function(){
           ZeroClipboard.setMoviePath('js/ZeroClipboard.swf');
            clip = new ZeroClipboard.Client();
            clip.setHandCursor(true);
           clip.setText($('#txtContent').val());
           clip.glue('btnCopy');
       });
   </script>
</head>
<body>
   <input type="text" id="txtContent" onChange="clip.setText(this.value)"/>
   <input type="button" id="btnCopy" value="copy" style="position:relative"/>
</body>
</html>