您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

js剪切板兼容性

发布时间：2020-04-19 23:56:47编辑：雪饮阅读（）

 

最近项目要求做一个链接拷贝功能，虽然有看到过微擎项目中有现成的，但是要剥离出来应该也挺麻烦吧，于是自己开始了探索之旅。

发现还挺棘手，什么ie不兼容、什么google无效、什么火狐报错、什么需要绑定到指定元素、什么对隐藏类元素无效、什么要先select然后拷贝然后去除select。总之还是太麻烦。

今天分享下我找到的一个比较简单轻松的实例。

首先不用说，你需要一个外部插件

<script type="text/javascript" src="/admin/js/clipboard.min.js"></script>

就是这个所谓的clipboard.js自己随便百度下就能找到的

然后是剪切业务，如我这里的业务需求是要点击拷贝时候选择“小程序链接”或“h5链接”

<a href="javascript:selectLinkType({$group.id});" class="btn_trash"><i class="icon icon-copy"></i>复制链接</a>

我这里用了layer弹窗层， 来选择拷贝类型

function selectLinkType(id){
 
       layer.open({
         type: 1,
         skin: 'layui-layer-rim', //加上边框
         area: ['420px', '240px'], //宽高
         content: `
         <div id="alert">
           <div class="list">
           <div class="row">
               <div>请选择链接类型:</div>
               <div>
                   <select name="linkType">
                       <option value="1">小程序链接</option>
                       <option value="2">h5链接</option>
                   </select>
               </div>
           </div>
           <div class="row">
               <button onClick="copyLink(${id})">拷贝</button>
           </div>
           </div>
         </div>
         `
       });
       }

那么我的业务拷贝方法

function copyLink(id){
     var group_id=id;
     var linkType=$("select[name=linkType]").val();
     var page="";
     if(linkType==1){
     //小程序
        page="/creditShop/index/index?group_id="+group_id;
     }
     else{
         page=location.protocol+"://"+location.host+"/mobile/index.php?m=exchange&group_id=3";
     }
 
 
 
 copyText( page, function (){console.log('复制成功');layer.msg('复制成功')});
 
 }

最后呢就是真正核心的剪切板方法了

function copyText(text, callback){ // text: 要复制的内容， callback: 回调
     var tag = document.createElement('input');
     tag.setAttribute('id', 'cp_hgz_input');
     tag.value = text;
     document.getElementsByTagName('body')[0].appendChild(tag);
     document.getElementById('cp_hgz_input').select();
     document.execCommand('copy');
     document.getElementById('cp_hgz_input').remove();
     if(callback) {callback(text)}
 }