我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。
clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+
最近在做一个的智能客服Web端浏览器应用，其中有一项需求是客户在获取系统返回的答案后点击“复制答案”按钮将答案复制到系统剪切板。本以为这是一个小case,但是发现如果要对各种主流浏览器都有良好的兼容性并不简单。原因在于出于安全原因，大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有，也默认被禁用)。
上网搜索了一下，现有的方案大致有两种：
一：使用原生javascript中window.clipboardData实现复制到剪贴板功能；
二：使用Zero Clipboard库；
方案一仅仅支持ie浏览器，在firefox,chrome浏览器上则不起作用。
方案二则是现有绝大多数网站（包括github等）所采取的方案，ZeroClipboard是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了,ZeroClipboard 中的 "Zero" 指的就是"不可见，零干扰"。
在尝试了之后发现现有的方案都不能满足需求。那么，对于复制到剪切板这种简单的操作有没有一种实现简单，兼容性良好的解决方案呢？有的！那就是github上的开源项目clipboard.js
使用简介
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> title{display: block; background-color:#DADADA } #bar{border:red solid 1px; width: 400px} .demoGroup{margin-bottom:30px } </style> </head> <body> <div class="demoGroup"> <title>复制文本</title> <div id="bar"> sdfsfewtewtdfg545we3r1we23</div> <button class="btn1" data-clipboard-action="copy" data-clipboard-target="#bar">一键复制</button> </div> <div class="demoGroup"> <title>剪切文本（剪切操作仅适用于text和textarea）</title> <input type="text" id="ipt" value="测试数据"> <button class="btn2" data-clipboard-action="cut" data-clipboard-target="#ipt">一键剪切</button> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/clipboard.min.js"></script> <script> function doClipboard(obj){ var clipboard = new Clipboard(obj); clipboard.on('success', function(e) { console.warn("复制/剪切成功!") console.info(e); }); clipboard.on('error', function(e) { console.error("复制/剪切失败!") console.info(e); }); } //复制 doClipboard('.btn1') doClipboard('.btn2') </script> </body> </html>
效果预览
插件官网下载地址：https://github.com/zenorocha/clipboard.js
方便大家我提供的：http://files.cnblogs.com/files/flyings/clipboard.min.js