js实现复制到粘贴板方法

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");
    })
}

我的个人博客,有空来坐坐

标签：复制到,function,粘贴板,js,indexOf,clipboard,oInput,var,手机
来源： https://blog.csdn.net/weixin_29491885/article/details/100159809