原生js实现点击按钮复制文本

最新推荐文章于 2022-09-05 15:49:00 发布

呼啦啦画酱

最新推荐文章于 2022-09-05 15:49:00 发布

阅读量516

点赞数

分类专栏：总结文章标签： JS 复制粘贴板

本文链接：https://blog.csdn.net/qq_42484025/article/details/100560320

版权

总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

封装函数参数 id：要复制的元素id，paramtype：复制的属性内容，一般是innerText；

copywxid(id, paramtype) {
                let target = null;
                if (paramtype) {
                    target = document.createElement('div');
                    target.id = 'tempTarget';
                    target.style.opacity = '0';
                    if (id) {
                        let curNode = document.querySelector('#' + id);
                        target.innerText = curNode[paramtype];
                    } else {
                        target.innerText = paramtype;
                    }
                    document.body.appendChild(target);
                } else {
                    target = document.querySelector('#' + id);
                }
                try {
                    let range = document.createRange();
                    range.selectNode(target);
                    window.getSelection().removeAllRanges();
                    window.getSelection().addRange(range);
                    document.execCommand('copy');
                    window.getSelection().removeAllRanges();
                    console.log('成功复制啦啦');
                } catch (e) {
                    console.log('复制失败呀');
                }
                if (paramtype) {
                    target.parentElement.removeChild(target);
                }
            },

原理总结；
1.先创建全透明div，并把要复制的内容放入其innerText
2.创建range对象，并选中id元素的节点
3.清除全部range对象，避免多余内容，
4.新增本次定义的range对象
5.使用execcommand（‘copy’）命令，复制内容
6.console.log可根据ui框架换成弹窗提示，