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进行编写

<!--copy_ID 这个class为唯一性。多个复制，请命名不同class区分-->
<div class="copy_box clearfix">
    <input readonly="readonly" type="text" value="" class="copy_code copy_ID">
    <button class="copy_btn2 copy_btn hid" data-clipboard-action="copy" data-clipboard-target=""></button>
</div>

JS

// 复制
$('.copy_btn').each(function(i,e){
    var _target=$(e).parent().find('.copy_code').attr('class').split('copy_code ')[1];
    $(e).attr('data-clipboard-target','.'+_target).addClass(_target+'_btn');

    // console.log(_target);

    clipboard = new Clipboard('.'+_target+'_btn');   
    clipboard.on('success', function(e) {  
        e.clearSelection();  
        alert('复制成功。');
    });   
    clipboard.on('error', function(e) {  
        alert('复制失败,请手动选择复制。');
    });
});

segmentfault上其他相关分享
使用clipboard实现前端页面复制到粘贴板的功能
Vue中配合clipboard.js实现点击按钮复制内容到剪切板