Html日记——实现全平台覆盖的复制到粘贴板

17-09-05 来源：[db:作者]

收藏我要投稿

我们这次会利用的神器有clipboard.js,但它对ios设备支持不太友好，所以我们ios部分用纯js实现兼容

这次我实现的效果的是直接点击文字复制，你们也可以根据自己的需求和clipboard.js的API是实现例如

<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</head>
<body>
    <!-- data-clipboard-text里面的内容就是所要复制的内容 --> 
    <p id="foo" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
    </p>
    <script>
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios用纯js实现
        $("#foo").click(function () {
            var copyDOM = document.querySelector('#foo');  //要复制文字的节点
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(copyDOM);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');
            try {
                var msg = successful ? 'successful' : 'unsuccessful';
                alert('复制成功');
                console.log('copy is' + msg);
            } catch (err) {
                console.log('Oops, unable to copy');
                alert('复制失败');
            }
            // 移除选中的元素
            window.getSelection().removeAllRanges();
        });
    } else {//安卓或PC用clipboard.js实现
        var clipboard = new Clipboard('#foo');
        clipboard.on('success', function (e) {
            alert('复制成功');
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            e.clearSelection();
        });

        clipboard.on('error', function (e) {
            alert('请选择“拷贝”进行复制!');
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    }

    </script>
</body>
</html>

把上面的代码直接复制下来即可使用

点击复制链接与好友分享!回本站首页