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



复制代码

差不多这样 就是把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

你可能感兴趣的:(clipboard.js 踩坑)