js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件

开发需求：手机端，点击按钮实现需复制的文本内容；
案例已做手机端浏览器兼容处理经测试，[QQ，微信，苹果，360，UC等]，可正常使用；

案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="screen-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <title>手机端文案复制</title>
    <style>
        body{ max-width: 640px; margin: 0 auto;}
        .copy-pp{ color: #666; line-height: 1.2;}
        .copy-btn{ background-color: cornflowerblue; color: #fff;}
        .copy-text{ opacity: 0;}
    </style>
</head>
<body>

<!--使用时：请调试到手机模式：-->

<div class="copy-pp" id="copy-pp">
    即使是一块牛肉，也应该有自己的态度，要慎其独，要善其身，要知道精彩的人生不能只有精肉，
    还要有适宜的肥油做调配，有雪白的肉筋做环绕，并且还要掌握跳进煎锅时的角度，姿势，以及火候，
    才能最终成为一块优秀道地的西冷牛排~
</div>

<button type="button" class="copy-btn" id="copy-btn" onclick="jsCopy(this)">点击复制分享链接</button>

<textarea class="copy-text" id="copy-text" value="" readonly="readonly"></textarea>

<script>
    function jsCopy(obj){
        var u = navigator.userAgent;
        //苹果
        if (u.match(/(iPhone|iPod|iPad);?/i)) {
            var copyDOM = document.getElementById("copy-pp");  //要复制文字的节点
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(copyDOM);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');
            try {
                var msg = successful ? '成功' : '失败';
                console.log(msg);
            } catch(err) {
                console.log(err);
            }
            // 移除选中的元素
            window.getSelection().removeAllRanges();
            obj.innerHTML = '已复制';
        }

        // 安卓
        if(u.indexOf('Android') > -1 ){
            var $copyText = document.getElementById("copy-text"),
                $copyPP = document.getElementById("copy-pp");
            $copyText.innerHTML = $copyPP.innerHTML.replace(/<[^>]+>/g,"");
            $copyText.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            obj.innerHTML = '已复制';
        }
        // 安卓系统的UC浏览器
        if(u.indexOf('Android') > -1 && u.indexOf('UCBrowser') > -1){
            obj.innerHTML = '点击复制分享链接';
            alert('若点击复制分享链接无效，请长按内容手动复制！');
        }
    }
</script>

</body>
</html>

js兼容安卓和IOS的复制文本到剪切板，已做浏览器兼容处理，勿需插件

猜你喜欢