clipboard.js 踩坑

因为最近产品的需求，要在移动端 实现复制功能，我就知道是个坑。看之前同事的代码 引用的：clipboard.js 看了一个github，感觉是一个成熟的插件了，于是放心的使用了。

"btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard



复制代码

差不都是这样，引用之前同事实践过，我也没在手机上细测，毕竟人家前一轮通过测试了啊。然后果然，要发布的时候测试说，安卓上测试不了呢，，，what?前一轮怎么测试的？我哭了，网上百度各种方法（各种ios android不兼容），一个较多的说法是 使用div等非 input textarea复制时会出现复制失败的情况（这时其实我没有注意问测试用的哪个浏览器）。 然后就改了input的使用方法

"foo" value="https://github.com/zenorocha/clipboard.js.git" style="z-index:-1;position:absulote;top:-1000px;left:-1000px;">


"btn" data-clipboard-target="#foo">
    "assets/clippy.svg" alt="Copy to clipboard">

复制代码

差不多这样 就是把input隐藏显示了。然后试了下，ios好的，安卓也是可以的。于是发布测试。。。然后测试的小米手机和华为手机不知道什么浏览器复制成功了，但是出现了调起软键盘的现象，我的ios没有，显然测试希望我隐藏掉。。。于是百度阻止调起键盘的情况，然后我是这么写的。

复制代码

发现显示成功，但是复制了奇怪的dom。。想哭。

然后我又去百度使用div的情况发现人家说的是ios打不开而我是安卓有问题，所以我觉得方法可能没问题 我要针对的测试一下， 于是又改回第一种写法，针对ios和安卓的浏览器认真的测试了一下，结果如下： 我的ios 11.3 微信 ok; safari:ok;uc:成功 测试的小米手机 微信ok 自带浏览器：ok；uc：失败 但是有一点就是uc触发了error事件，但实际剪切板是剪贴到了内容的。。。。本来想说反正都读到了，就把提示改成成功吧（窃喜）。开开心心的发布测试。 你以为会这么顺利吗？？？？！当然不可能，那我几天就不会写这个文档记录了。问题是测试的ios12.2 uc触发error事件了， 但是没有复制到内容。看github上的issues果然又说not work >ios12。更多的是说have problem in UC brower。。果然是差不多的情况，然后作者说他没办法，，，但是国内其实UC还是很多人用的。真想骂人，虽然我用安卓手机的时候 也是UC的使用者。。。调试发现虽然复制失败但是其实console.error('Trigger:', e.trigger)是正确的；然后说用这个事件 就试试。

new ClipboardJS('.btn', {
    text: function(trigger) {
        return $(trigger).data("clipboard-text")
    }
});
复制代码

发现uc还是无法复制到剪贴板。。

然后又不能不用啊。。。就只能想代替方案。

  this.clipboard.on("success", function(e){
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });
    // ClipboardJS安卓机有问题
    this.clipboard.on("error", function(e){
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        $('.showCopy p').html($(e.trigger).data("clipboard-text"));
        $('.showCopy').show();
        $('.js_mask1').show();
    });
    
            
        
"showCopy">
            
复制失败，请长按复制
            

            
"closed-btn js_closed_copy">关闭
        
         
         
         .showCopy{
    display: none;
    position:fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    z-index: 9999;
    -webkit-user-select:all;
	-moz-user-select:all;
	-o-user-select:all;
    user-select:all;
    background: #fff;
    
}
.showCopy p{
    padding: 5px 0;
    font-size: 16px;
}
.showCopy .closed-btn{
    margin: 10px auto 0;
    border: 1px solid red;
    padding: 4px 18px;
    width: 80px;
    color: red;
    font-size: 13px;
    border-radius: 4px;
    text-align: center;
}
复制代码

是的 就是error的时候跳个弹框 手动复制..这个其实不难。但是我遇到的问题是其实很多项目 都会-webkit-user-select: none; 禁止长按事件这个需要手动复制冲突，所以就把css贴出来。 差不多就是这个方案了。。。。

重点：垃圾UC/垃圾UC/垃圾UC/垃圾UC/垃圾UC

转载于:https://juejin.im/post/5ce4c0c7e51d45105d63a452