**万能的“一键复制到剪贴板”，支持IE、火狐、谷歌及移动版浏览器**

   说到点击按钮“复制到剪贴板",大家都可能用过，但是之前的实现方不是只支持某些浏览器，就是要在网页内嵌swf(Flash)文件。
   这两种方法：第一种不能很好的兼容多数浏览器，第二种方式下开发人员可能会担心Flash的安全性问题。
   现在出现了一种新的实现方式：clipboard.js。只要给页面引入一个js文件，并且在页面上做一定处理，就可
   实现全浏览器兼容的“一键复制到剪贴板”的功能。
目录

  
  

   
   万能的一键复制到剪贴板支持IE火狐谷歌及移动版浏览器
    
    

     
     
      
      

       
       目录

       
       clipboardjs 
         
         下载clipboardjs 
         使用clipboardjs 
         不止是复制还有更多 
         浏览器支持 
         以防万一 
         脚注 
        
 

      
      

clipboard.js


      
      
  
       
       无需Flash，无需框架； 
 仅需3KB的压缩版JS ，就可实现华丽的剪贴板复制操作 ——  [clipboardjs.com]

      
      
clipboard.js是一个轻量级的“一键复制到粘贴板”工具，您只需要将其引入您的项目，并在对应位置调用即可。
      
                        
       
                        
       
                        
       
                    
      

下载clipboard.js
最直接的方式就是进入官方主页下载 

或者直接点击https://github.com/zenorocha/clipboard.js/archive/master.zip。
使用clipboard.js

clipboard.js现在可支持文本框text和文本域text area两种方式的粘贴板复制：
1. 使用文本框作为复制内容的来源
(1).在你的页面引入clipboard.js1

<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type = "text/javascript"> 
       //加载clipboadr.js
         //.btn 按class绑定功能按钮
         var clipboard = new Clipboard('.btn');
       //复制成功触发的事件
        clipboard.on('success', function(e) {
        //自定义事件区域
            console.log(e);
        });
        //复制失败触发的事件
        clipboard.on('error', function(e) {
        //自定义事件区域
            console.log(e);
        });
<script/>
(2)在你的页面上加入如下代码：
<!-- 要复制的目标 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- 按钮及驱动 -->
    <!--保证button clipboard-target 和 input id 一致-->
<button class="btn" data-clipboard-action="copy" 
    data-clipboard-target="#foo">复制到剪贴板</button>

(3)打开你的浏览器，享受胜利果实！

2.使用文本域作为复制内容的来源
(1).在你的页面引入clipboard.js2

<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type = "text/javascript"> 
       //加载clipboadr.js
         //.btn 按class绑定功能按钮
         var clipboard = new Clipboard('.btn');
       //复制成功触发的事件
        clipboard.on('success', function(e) {
        //自定义事件区域
            console.log(e);
        });
        //复制失败触发的事件
        clipboard.on('error', function(e) {
        //自定义事件区域
            console.log(e);
        });
<script/>

(2)在你的页面上加入如下代码：

<!-- 要复制的目标 -->
<textarea id="bar">hello, ClipBoard JS !</textarea>
    <!-- 按钮及驱动 -->
        <!--保证button clipboard-target 和 input id 一致-->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">复制到剪贴板</button>

(3)打开你的浏览器，享受胜利果实！

不止是复制，还有更多…

其实clipboard.js还可以进行剪切操作，而且它的可操作对象不止于上边介绍的两种，只不过官网上主推这两种方式。如需了解clipboard.js更多功能，请进https://github.com/zenorocha/clipboard.js/archive/master.zip 3下载源代码及DEMO查看详细用法。