zoukankan      html  css  js  c++  java
  • H5复制粘贴双端适配的解决方案(终极版)

    前言

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

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

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

    图片描述

  • 相关阅读:
    css中!important的用法
    mysql分区
    js 随机生成信用卡号
    js argument
    lnmp
    php的mcrypt
    php gd
    php socket
    最优服务次序问题 水 NOJ1254
    众数问题 NOJ 1207
  • 原文地址:https://www.cnblogs.com/10manongit/p/12814264.html
Copyright © 2011-2022 走看看