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

keithyau 发布于2019-08-22 16:10 / 2052人阅读

摘要：前言最终适配所有机型的方案基于官网这个库由几个不同的提供商托管。提供的复制失败的方法，进行复制失败提示复制失败请手动选择复制。上其他相关分享使用实现前端页面复制到粘贴板的功能中配合实现点击按钮复制内容到剪切板

前言

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

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

建议使用 v1.7.1 版本


以下版本为 v2.0.4
jsDelivr

cdnjs

RawGit

unpkg

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

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

服务器托管海外云主机 asp 复制到粘贴版终极版 vps不能复制粘贴复制粘贴js代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94112.html

2017年前端框架、学习资料盘点（终极版）

摘要：开发游戏营销页面中文网开发官网社区中文文档阮一峰的入门实例教程极客学院整理的文档解决方案复制双端兼容方案待完善微信开发微信小程序开发文档微信小游戏开发文档学习文档极客学院学习文档常見用法對照表年看过的中文官网其他库类翻页库柱状图饼 canvas开发/H5游戏/H5营销页面 threehttps://threejs.org/AR jshttps://github.com/shouziji...

makeFoxPlay 2019-08-22 14:00 评论0 收藏0
h5实现一键复制到粘贴板兼容ios

摘要：是方法起始光标结束光标不兼容苹果复制文字必须手动触发点击事件或者其他事件，不能直接使用调用实现一键复制到粘贴板兼容兼容性补充移动端安卓手机微信和几个手机浏览器都可以用。实现原理采用document.execCommand(copy)来实现复制到粘贴板功能复制必须是选中input框的文字内容，然后执行document.execCommand(copy)命令实现复制功能。初步实现方案...

miracledan 2019-08-23 18:13 评论0 收藏0