对于文本复制本来就是右键->复制，或者Ctrl+C，很简单的事情。不过为了提升用户体验，就让我们找一个兼容性强的万全之策吧。

纯JS实现的方式不能兼容到现代浏览器，看了Discuz和bootstrap上代码复制的实现，发现都是借用Flash来实现的。

原理

Flash可以操作剪贴板，用一个透明的Flash覆盖到一个DOM元素上。点击DOM实际是点击了Flash，从而操作剪贴板。

需要用到一个JavaScript库：Zero Clipboard，和一个Flash文件。
另外要注意：页面必须在放到服务器上，本地没有Flash权限。

代码实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS文本复制</title>
<style type="text/css">
    .box {
        width: 610px;
        margin: 50px auto;
        position: relative;
    }
    textarea {
        width: 600px;
        height: 150px;
        padding: 5px;
        resize: none;
        border: 1px solid #ddd;
        outline: none;
    }
    #copy-btn {
        padding: 5px 8px;
        background: #F7F7F9;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 0;
        position: absolute;
        right: -2px;
        margin-top: -30px;
    }
    #clip-btn {
      width: 80px;
      height: 40px;
    }
</style>
</head>
<body>
    <div class="box">
        <h3>JS文本复制实例</h3>
        <textarea placeholder="复制的内容区" id="content"></textarea>
        <button id="copy-btn">点击复制</button>
    </div>
    <div id="clip-btn"></div>
<script src="ZeroClipboard.js"></script> 
<script>
  var clip = null;
  // 设置Flash文件路径
  ZeroClipboard.setMoviePath("ZeroClipboard.swf");
  function copyCode(text) {
    clip = new ZeroClipboard.Client();
    // 设置鼠标悬浮样式 
    clip.setHandCursor(true); 
    // 点击复制
    clip.addEventListener('mouseOver', function() {
      clip.setText(text);
    });
    // 复制完成回调
    clip.addEventListener( "complete", function(){ 
      alert("复制成功！"); 
      clip.destroy(); //释放
    }); 
    // Flash加载的目标容器
    clip.glue('clip-btn');
  }
  /* js实现 */
  function $(id) {
    return document.getElementById(id);
  }
  $('copy-btn').onmouseover = function(e) {
    var clipBtn = $('clip-btn');
    clipBtn.style.position = 'absolute';
    clipBtn.style.left = (e.clientX -55 )+'px';
    clipBtn.style.top = (e.clientY - 35)+'px';
    copyCode($('content').value);
  };
  /*jQuery实现*/
  // $('#copy-btn').mouseover(function() {
  //   var t = $(this);
  //   var cobyText = t.prev().val();
  //   $('#clip-btn').css({
  //     position: 'absolute',
  //     left: t.offset().left,
  //     top: t.offset().top,
  //     zIndex: 999
  //   }).mouseleave(function() {
  //     clip.destroy();
  //   });
  //   copyCode(cobyText);
  // });
</script>
</body>
</html>
  1. 参考文章：兼容主流浏览器的JS复制内容到剪贴板 ↩