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

最新推荐文章于 2023-12-13 16:33:18 发布

饥渴计科极客杰铿

最新推荐文章于 2023-12-13 16:33:18 发布

阅读量651

点赞数

分类专栏： html 文章标签： html ios

本文链接：https://blog.csdn.net/qq_32198277/article/details/77821988

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们这次会利用的神器有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>

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

Demo地址http://runjs.cn/detail/rjqjqh8w

饥渴计科极客杰铿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html日记——实现全平台覆盖的复制到粘贴板

我们这次会利用的神器有clipboard.js,但它对ios设备支持不太友好，所以我们ios部分用纯js实现兼容这次我实现的效果的是直接点击文字复制，你们也可以根据自己的需求和clipboard.js的API是实现例如点击按钮复制文字<html><head><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></s
复制链接

扫一扫