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

前言

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

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

建议使用 v1.7.1 版本


以下版本为 v2.0.4
jsDelivr

cdnjs

RawGit

unpkg

HTML部分按照clipboard提供的API进行编写


    

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实现点击按钮复制内容到剪切板

H5复制粘贴双端适配的解决方案(终极版)_第1张图片

你可能感兴趣的:(clipboard,javascript,html5,移动端适配,移动端页面)