ZeroClipboard2.x 复制功能

 github下载地址:https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

1.ZeroClipboard 介绍及原理

    ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。ZeroClipboard 中的 "Zero" 指的就是"不可见，零干扰"。

    不过从 Flash 10开始，由于浏览器和Flash的安全限制，要求用户必须在Flash区域上进行真实操作才能操作剪贴板。于是，ZeroClipboard 的作者想到一个办法：它将 Flash 做成透明的，以便于我们放在诸如链接、按钮等需要放置的任何地方。这样，用户界面看起来没有变化，当点击链接或按钮时，实际上点击是却是 Flash，从而实现复制操作。

2.使用方法

效果如下：（用了bootstrap样式）

html：

<div class="input-group" style="margin:20px 30px; width: 200px;">
        <input id="fe_text" type="text" class="form-control"  value="aaaaaaaa">
        <span class="input-group-btn">
            <button id="d_clip_button" class="btn btn-default" type="button" data-clipboard-target="fe_text">
                <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
            </button>
        </span>
    </div>

js：

<script type="text/javascript" src="resources/js/ZeroClipboard.min.js"></script>
<script type="text/javascript">
    // 定义一个新的复制对象
    var clip = new ZeroClipboard(document.getElementById("d_clip_button"), {moviePath: "ZeroClipboard.swf"});

    // 复制内容到剪贴板成功后的操作
    clip.on( 'complete', function(client, args) {

    } );
</script>

css：

<link href="resources/css/bootstrap.min.css" rel="stylesheet">

注意：

1.ZeroClipboard.js和swf要放到同一目录下，这样引入js就会自动引入swf

  否则要配置swf路径

ZeroClipboard.config( { swfPath: "http://YOURSERVER/path/ZeroClipboard.swf" } );

2.在github上下载最新版的ZeroClipboard2.x，2.x与1.x用法不同

3.ZeroClipboard 2.x 原则上不兼容IE 6 ~ IE 8等低版本IE浏览器，如果需要兼容IE 6 ~ IE 8，请使用 1.x 或者 2.0.2 版本，推荐使用 2.0.2 版本。

4.由于 Flash 本地沙箱的安全限制，代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作，需要用服务器部署。

更多用法：http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm