clipboard.js 踩坑

由於最近產品的需求，要在移動端 實現複製功能，我就知道是個坑。看以前同事的代碼 引用的：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