移动端复制功能

<!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);
            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>
猜你喜欢
