前端js实现自动复制到剪贴板

前端开发 网站 网站前端开发代码 网站前端开发百度云

html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>js自动复制到剪贴板</title>
    <meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″ name=”viewport”>
    <style>
        /* reset wap */
        body,
        p,
        a,
        div,
        ol,
        ul,
        li,
        dl,
        dd,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        input,
        iframe,
        nav,
        header,
        footer {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            font: 16px Microsoft YaHei, sans-serif;
            -webkit-tap-highlight-color: transparent;
            color: #2a2b2c;
            background: #fff;
        }
        *,
        *::before,
        *::after {
            outline: none;
            box-sizing: border-box;
        }
        a,
        img {
            text-decoration: none;
            display: block;
            color: #2a2b2c;
            border: 0;
        }
        input {
            border: 0;
        }
        .d1 {
            width: 360px;
            height: 50px;
            margin: 50px auto;
            background: #eee;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”d1″>点击自动复制到剪贴板1</div>
        <div class=”d1″>点击自动复制到剪贴板2</div>
        <div class=”d1″>点击自动复制到剪贴板3</div>
    </div>
    <script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
    <script>
        $(function () {
            $(‘.d1’).on(‘click’, function () {
                oCopy(this);
                return false;
            });
            function oCopy(ele) {
                const range = document.createRange();
                range.selectNode(ele);
                const selection = window.getSelection();
                selection.rangeCount > 0 && selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand(‘copy’);
            }
        });
    </script>
</body>
</html>

web前端开发制作网站素材 前端开发必知道的网站 前端开发前端环境

» 本文来自:前端开发者 » 《前端js实现自动复制到剪贴板》
» 本文链接地址:https://www.rokub.com/5391.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!