9行代码实现复制内容至剪切板

最新推荐文章于 2023-03-10 16:53:34 发布

置顶

ma125120

最新推荐文章于 2023-03-10 16:53:34 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： copy 剪贴板 Selection API Range

本文链接：https://blog.csdn.net/qq_36662470/article/details/80097473

版权

本文介绍了如何使用9行代码结合Range对象和HTML5的Selection API实现在主流浏览器中复制内容到剪切板。提供了一个Demo链接，并详细解释了代码的执行流程，包括设置选择区域、调用document.execCommand复制到剪切板以及清理选择区域的步骤。此外，还提到了使用npm包简化功能引入的方式，并分享了GitHub源码地址。

摘要由CSDN通过智能技术生成

9行代码实现复制内容至剪切板

Demo: https://ma125120.github.io/ma-animate/test/copy.html

本方法主要使用了 Range 对象和HTML5的Selection API，经过测试，本方法在主流浏览器如谷歌浏览器、火狐浏览器、360安全浏览器、搜狗高速浏览器中均运行良好。

先附上大家最想看的代码：

function copy(el) {
   
    var range = document.createRange();
    var end = el.childNodes.length;
    range.setStart(el,0);
    range.setEnd(el,end);

    var selection = window.getSelection();