js实现复制到粘贴板方法

2019-08-30 15:41:04 阅读：376 来源： 互联网

标签：复制到 function 粘贴板 js indexOf clipboard oInput var 手机

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js实现复制到粘贴板方法

HTML:

JS: