js复制内容到剪贴板

这个已经是个老生常谈的话题了，网络上相关的资料也有很多，这里我仅仅是对我找到的资料和自己的测试作一些整理。

IE虽然是个坑爹的浏览器，不过在这个需求上，IE绝对是最不坑爹的。
在任何时候，我们只需要调用clipboard.setData(“text”, “我是剪贴板内容”)就可以了，不过会在第一次使用时弹出一个授权提示框；
同样的，我们还可以调用clipboard.getData(“text”)来获取剪贴板的内容哦。
坑爹的IE终于不再坑爹了，鼓掌~~！

chrome也支持剪贴板操作的，下面我们来看看。

// 方法一
var element = document.createElement("input");
element.type = "text";
element.value = "我是剪贴板内容";
document.body.appendChild(element);
element.select();
document.execCommand("copy");
document.body.removeChild(element);

// 方法二
var element = document.createElement("pre");
element.textContent = "我是剪贴板内容";
document.body.appendChild(element);
var selection = getSelection();
selection.removeAllRanges();
var range = document.createRange();
range.selectNodeContents(element);
selection.addRange(range);
document.execCommand("copy");
document.body.removeChild(element);

// 方法三
window.onload = function () {
    var textbox = document.getElementById("textbox");
    textbox.oncopy = function (event) {
        event.clipboardData.setData("text", "我是剪贴板内容");
        event.preventDefault();
    }
    textbox.onpaste = function (event) {
        alert(event.clipboardData.getData("text"));
    }
}

方法三比较有意思，不但可以复制到剪贴板，还可以获取剪贴板内容；同时，又有点然并卵。因为需要用户手动按Ctrl+C/Ctrl+V，只有在很特殊的情况下才有用。而且setData后需要preventDefault，否则就是“白干”了。
另外比较有意思的是，虽然需要用户按Ctrl+V才起作用，但实际上onpaste事件绑定在body上也是有效的；oncopy还是必须要绑定到textbox上的。
虽然方法三和IE的API类似，但就没有IE那么好用了，毕竟IE可以随时调用。

至于方法一和方法二，记得要顺便给element设置一些样式，好让用户察觉不到这个element，否则页面产生跳动就不好了。

firefox就比较坑爹了，上面的方法中只有chrome的方法三可用，且不像chrome那样可以把onpaste绑定到body上，只能绑定到input/textarea或具有contenteditable属性的非文本框元素上。

如果要使用clipboardData，可在oncopy/onpaste中使用event.clipboardData || clipboardData来获取clipboardData对象，这样可以兼容IE和非IE；
如果只需要考虑IE，就不受oncopy/onpaste的限制，可以随时使用clipboardData；
如果想随时访问剪贴板，又想兼容IE和非IE，可参考ZeroClipboard，这是一个flash+js的方案。