浏览器兼容的copy复制功能

复制功能的网上代码很多，从最初只支持IE，到最后使用ZeroClipboard.js结合flash插件来兼容现代浏览器，直至现代浏览器支持execCommand后，才有了下面的代码。

针对input或textarea元素copy复制

<input id="copy-txt" value="节后综合症" readonly>
<span id="copy-btn">复制</span>

var copyToClipboard = function () {
        var win = window,
              doc = document,
              ele = doc.getElementById('copy-txt'),
             txt = ele.value;
        if(win.clipboardData){//IE浏览器
            win.clipboardData.clearData();
            win.clipboardData.setData("Text", txt);
            alert("复制成功！");
            return;
        }
        if(ele.select && doc.execCommand){
           ele.select();//首先要选中要复制的内容
            ele.setSelectionRange(0, ele.value.length);
            //doc.execCommand('Copy')返回值如果是 false 则表示操作不被支持或未被启用
            if( doc.execCommand('Copy') ){
                alert("复制成功！");
            }else{
                alert("复制操作不被支持，请双击内容复制！");
            }
        }
    },
    element = document.getElementById('copy-btn');

if(element.addEventListener){
  element.addEventListener('click',copyToClipboard,false);
}else{
  element.attachEvent('onclick',copyToClipboard);
}

window.clipboardData

window.clipboardData只针对IE,它的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。

（1）clearData(sDataFormat) 删除剪贴板中指定格式的数据。sDataFormat:"text","url"

（2）getData(sDataFormat) 从剪贴板获取指定格式的数据。 sDataFormat:"text","url"

（3）setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。 sDataFormat:"text","url","file","html","image"，sData: 剪贴数据

HTMLInputElement.select

HTMLInputElement.select() 方法选中一个 <textarea> 元素或者一个 带有 text 字段的 <input> 元素里的所有内容。

注：这就是为什么要用input或textarea来容纳要复制的内容，样式可以根据设计图样式自行美化。

document.execCommand

返回值：一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。

非input或textarea元素外copy复制功能

<p id="js-emaillink">选中文字啦!!!!</p>
<button id="js-emailcopybtn">Copy</button>

if(document.addEventListener){

  var copyEmailBtn = document.querySelector('#js-emailcopybtn'); 

  copyEmailBtn.addEventListener('click',function(event){

    var emailLink = document.querySelector('#js-emaillink');

    var range = document.createRange(); 
    //返回一个Range对象

    range.selectNode(emailLink);
    //设定一个包含节点和节点内容的Range

    window.getSelection().addRange(range);
    //返回一个Selection对象，并把一个区域（Range）对象将被加入选区

    var successful = document.execCommand('copy');

    window.getSelection().removeAllRanges();
    //从当前selection对象中移除所有的range对象,取消所有的选区

    console.log("复制成功！");

  });


}else{//IE8及以下

  var copyEmailBtn = document.getElementById('js-emailcopybtn'); 

  copyEmailBtn.attachEvent('onclick',function(event){

    var emailLink = document.getElementById('js-emaillink'); 

    var txt = emailLink.innerHTML;

    var win = window;

    win.clipboardData.clearData();
    //删除剪贴板中的数据

      win.clipboardData.setData("Text", txt);
      //给剪贴板赋予指定格式的数据text|url|file|html|image

      alert("复制成功！");

  });

}