H5複製粘貼雙端適配的解決方案（終極版）

前言

最終適配全部機型的方案基於clipboardjs
官網 https://clipboardjs.com/

這個庫由幾個不一樣的CDN提供商託管。選擇你最喜歡的：）

建議使用 v1.7.1 版本
<script src="//static.leiting.com/lib/clipboard.js"></script>

如下版本爲 v2.0.4
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
RawGit
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>
unpkg
<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>

HTML部分按照clipboard提供的API進行編寫

<input readonly="readonly" type="text" value="414" class="code"/>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".code">複製</button>

JS

//複製
    $('.btn').on('click', function(){

        //這部分使用原生的複製方法
        $('.code').select();
        document.execCommand("copy",false,null);
        
        //這部分使用clipboardjs提供的複製方法
        var clipboard = new Clipboard('.btn');   
        clipboard.on('success', function(e) {  
            e.clearSelection();  
        });   
        alert('複製成功。');

        //clipboardjs提供的複製失敗的方法，進行復制失敗提示
        clipboard.on('error', function(e) {  
            alert('複製失敗,請手動選擇複製。');
        });  
    })

segmentfault上其餘相關分享
使用clipboard實現前端頁面複製到粘貼板的功能
Vue中配合clipboard.js實現點擊按鈕複製內容到剪切板