因为最近产品的需求，要在移动端 实现复制功能，我就知道是个坑。看之前同事的代码 引用的：clipboard.js 看了一个github，感觉是一个成熟的插件了，于是放心的使用了。
<!--引用-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<!--html-->
<div class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</div>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
复制代码差不都是这样，引用之前同事实践过，我也没在手机上细测，毕竟人家前一轮通过测试了啊。然后果然，要发布的时候测试说，安卓上测试不了呢，，，what?前一轮怎么测试的？我哭了，网上百度各种方法（各种ios android不兼容），一个较多的说法是 使用div等非 input textarea复制时会出现复制失败的情况（这时其实我没有注意问测试用的哪个浏览器）。 然后就改了input的使用方法
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" style="z-index:-1;position:absulote;top:-1000px;left:-1000px;">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
复制代码差不多这样 就是把input隐藏显示了。然后试了下，ios好的，安卓也是可以的。于是发布测试。。。然后测试的小米手机和华为手机不知道什么浏览器复制成功了，但是出现了调起软键盘的现象，我的ios没有，显然测试希望我隐藏掉。。。于是百度阻止调起键盘的情况，然后我是这么写的。
<script>
<!--位置一-->
$("input").focus(function(){
document.activeElement.blur();
});
<!---->
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert('成功')
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('失败')
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
<!--位置二-->
$("input").focus(function(){
document.activeElement.blur();
});
<!---->
</script>
复制代码发现显示成功，但是复制了奇怪的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)是正确的；然后说用这个事件 就试试。
<!--我用了jq-->
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();
});
<!-- 复制失败补偿 -->
<div class="showCopy">
<h3>复制失败，请长按复制</h3>
<p></p>
<div class="closed-btn js_closed_copy">关闭</div>
</div>
<!-- 复制失败补偿 -->
.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