js + clipboard 插件实现复制到粘贴板方法-兼容pc及移动端（ios/安卓）
HTML:
<div id="content”>复制改内容到粘贴板</div>
<button id=“btn" data-clipboard-target="#content" data-clipboard-action="copy”>点击</button>
JS:
- 首先判断终端为pc还是手机，手机端判断为安卓手机还是iPhone手机。因为pc端两种方法都有兼容，所以此处只考虑是否为安卓手机即可。
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(https://www.wangyanan.online/\sQQ/i) == " qq", //是否QQ
mdsApp: u.indexOf('MdsApp') > -1 //是否MdsApp
};
}()
}
- 若不是安卓手机则首先引入clipboard.js;
可以通过npm方式安装:npm install clipboard —save
或者直接参照clipboard官网 - 安卓手机的复制方法（封装的函数）
function copyVal(id) {
var id = document.getElementById(id);
var val = id.innerHTML;
var oInput = document.createElement("input");
oInput.type = "text";
oInput.value = val;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.style.display = "none";
alert("复制成功");
}
- 如果终端为安卓手机则执行下面的方法
if (browser.versions.android) {
$(“#btn").on("click", function() {
copyVal(“content");
});
}else{
//否则不是安卓手机，执行下面的方法
var clipboard = new Clipboard("#btn");
clipboard.on("success", function(element) { //复制成功的回调
alert("复制成功");
});
clipboard.on("error", function(element) { //复制失败的回调
console.info("error");
})
}