【JavaScript】利用clipboard实现移动端点击复制，兼容IOS

好久没有写了笔记了，入职两个月，才发现自己还是个假前端！一个没有灵魂的前端菜鸟~~

直接如题，被推广部的小姐姐追了好久，终于还是有一个方法解决了！

移动端！！！点击复制！！！先说下踩坑！！！

1）其他方法的兼容性，都不是很强，自己也没有找到合适的，最后还是选择clipboard，具体的载入，自己可以找下资料，值得一提的是，高版本的clipboard，需要使用clipboardJS创建实例；

2）在创建选择文本时，和document.execCommand('copy');类型，选择的文本不能设置display: none; 或 visibility: hidden; 来隐藏表单元素。否则复制不到。使用布局，把他放到九霄云外去就行。

3）clipboard在安卓下，点击复制问题不大，但是苹果好像不行，这边的反馈。在这里对设备进行判断，区分开苹果端，然后最后采取的是按钮复制，使用按钮的点击复制，苹果系统可以兼容，最后也把按钮的样式进行处理。让他看起来像文本。

大概就是这些坑了，目前出来的效果应该是可以的。只是推广小姐姐被我一直折腾，很慌。毕竟那个链接一直在走广告。

关键代码：

HTML代码：

<textarea readonly id="command" style="position:fixed;top: -1000px;">IRYclub</textarea>
<p class="wxh" style="font-size: 18px;">
 <span oncopy="actionCopy()" id="copySpan" class="copy" data-clipboard-action="copy" data-clipboard-target="#command">
     IRYclub
 </span>

 <button style="border: none;outline: none;display: none;color: #3cb034;font-size: 30px;background-color: white;padding: 10px 15px;line-height: 35px;"
         oncopy="actionCopy()" id="copyBtn" class="copy" data-clipboard-action="copy" data-clipboard-target="#command">
     IRYclub
 </button>
</p>

JS代码：

<script src="js/clipboard.min.js"></script>
<script>
    window.onload = function(){
        var copySpan = document.getElementById("copySpan");
        var copyBtn = document.getElementById("copyBtn");
        var phoneType = detect();
        console.log(phoneType);
        if(phoneType == 'ios'){
            copySpan.style.display = "none";
            copyBtn.style.display = "inline-block";
        }
    };

    var clipboard = new Clipboard('.copy');
    clipboard.on('success', function(e) {
        actionCopy();
        alert('复制成功，请打开微信搜索公众号');
    });
    clipboard.on('error', function(e) {
        actionCopy();
        alert('您的浏览器暂不支持，请长按复制');
    });
    function detect(){
        var equipmentType = "";
        var agent = navigator.userAgent.toLowerCase();
        var android = agent.indexOf("android");
        var iphone = agent.indexOf("iphone");
        var ipad = agent.indexOf("ipad");
        if(android != -1){
            equipmentType = "android";
        }
        if(iphone != -1 || ipad != -1){
            equipmentType = "ios";
        }
        return equipmentType;
    }
</script>

其他，有问题的再进行补充~~~

【JavaScript】利用clipboard实现移动端点击复制，兼容IOS

猜你喜欢