H5复制粘贴双端适配的解决方案（终极版）

前言

最终适配所有机型的方案基于clipboardjs
官网https://clipboardjs.com/

这个库由几个不同的CDN提供商托管。选择你最喜欢的：）

建议使用 v1.7.1 版本
<script src="http://testgumballs.leiting.com/test/copy/js/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实现点击按钮复制内容到剪切板

来源：CSDN

作者：weixin_34376986

链接：https://blog.csdn.net/weixin_34376986/article/details/88857857