js复制内容到剪贴板方案与兼容性

js复制内容到剪贴板方案与兼容性，如果只考虑IE9以上高版本浏览器推荐使用document.execCommand或者Clipboard.js，如果你要兼容IE8或者其他低版本浏览器，那就要选择ZeroClipboard.js，当然如果你要全兼容也可以用ZeroClipboard.js和另外两个配合，写个判断调用不同的插件来实现复制到剪切板。

使用document.execCommand() 实现复制内容到剪贴板

document.execCommand() 介绍

在这段代码里, 其实最核心就是 document.execCommand() 方法了, 该方法的大概用途是 对选中区域 进行一些操作 有关这个方法的具体介绍，

有关document.execCommand的介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

document.execCommand() 实现复制js代码

// 获取 input 元素
var input = document.getElementById('#showLink');
input.focus();
input.select();

// 执行复制命令
//document.execCommand('Copy');
try{
    if(document.execCommand('copy', false, null)){
        //success info  成功了放些提示
    } else{
        //fail info   失败了放些提示
    }
} catch(err){
    //fail info 失败了放些提示
}

注意：input元素不能type="hidden"和display:none否则js不能监听到input.select();  兼容chrome/ FF/ IE>9/ Safari新版
 

使用ZeroClipboard.js实现复制内容到剪贴板

使用Clipboard.js实现复制内容到剪贴板

Clipboard.js是一个纯js复制内容到剪贴板的解决方案，Clipboard.js插件兼容chrome/ FF/ IE>9/ Safari新版

Clipboard的详细使用方法：js复制内容到剪贴板插件（clipboard.js）

Clipboard.js示例：

var clipboard = new Clipboard('.js-btn');

//可以自己加些处理
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});