拷贝到剪切板——一个flash实现、兼容性不错的js插件ZeroClipboard

来源：互联网发布：java画图编辑：程序博客网时间：2024/06/06 16:33

1.需求

这里写图片描述

2.为什么推荐用插件

浏览器对js实现拷贝页面信息做了限制，原因是随意获取客户端页面上的信息，可能会发生用户输入的账号、密码等信息，被不法分子在用户不知情的情况下拷贝发送给服务端，导致用户信息泄露。IE好像还是提供了js拷贝页面信息的接口的，但是Chrome和Firefox就没那么容易实现了。所以推荐一个兼容主流浏览器的js插件，ZeroClipboard。

3.简单用法

只是为了实现需求，没有更加了解用法，下面是最简单的用法：1.官网下载，用dist目录下的ZeroClipboard.min.js、ZeroClipboard.swf即可。2.引入插件

    <%--拷贝到剪切板插件--%>    <script src="/script/lib/ZeroClipboard.min.js"></script>

还有一个ZeroClipboard.swf文件放在和插件相同目录下即可自动引入，如果放在其他路径下需要配置一下3.HTML

    <%--被绑定dom元素--%>    <img id="copyBtn" class="copyBtn" src="/images/jd/jdCopyBtn.png" />

4.js

    //配置ZeroClipboard.swf，与js相同路径可省略            <%--ZeroClipboard.config({--%>                <%--swfPath: '/script/lib/ZeroClipboard.swf'--%>            <%--});--%>            //初始化            var client = new ZeroClipboard(document.getElementById("copyBtn"));            client.on("ready", function(readyEvent) {                client.on("copy", function(event) {                    var clipboard = event.clipboardData;                    var copyText = '${data.couponNum}';                    clipboard.setData("text/plain", copyText); // 将内容添加到剪切板                });            });

大功告成！科科~

0 0