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

最新推荐文章于 2024-10-15 17:01:40 发布

转载最新推荐文章于 2024-10-15 17:01:40 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014278895

文章标签：

#运维 #前端 #javascript #ViewUI

本文介绍了一个基于clipboard.js的复制功能实现方案，适用于多种浏览器环境。提供了详细的HTML、JS代码示例，展示了如何将该库集成到项目中，并利用其API完成内容复制操作。

前言

最终适配所有机型的方案基于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>

    //复制
    $('.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('复制失败,请手动选择复制。');
        });  
    })

图片描述