js实现选择及复制粘贴

最新推荐文章于 2025-03-26 14:27:14 发布

weixin_30469895

最新推荐文章于 2025-03-26 14:27:14 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhubei/p/9178545.html

本文介绍了一种简单的网页元素复制方法，通过JavaScript实现点击按钮即可将指定元素内容复制到剪贴板的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目有个点击复制到粘贴板的需求，在这里做一个简单的例子分享给大家，没考虑兼容性，需要兼容的大家去查找下文档

//html
<p id="element">测试测试<p>
<botton onclick="copyText(ele)">点击复制</botton>

//js

function copyText(ele) {
　　var element = document.querySelecter(ele);

　　　var selection = window.getSelection(); // 创建Selection 对象

　　 var range = document.createRange(); //创建Range 对象

range.selectNodeContents(element); //设定一个目标节点内容的 Range

selection.removeAllRanges(); //清空选择区域

selection.addRange(range); //选中元素, 这一步可以实现全选

document.execCommand("copy"); //复制到粘贴板

　　 selection.removeAllRanges(); //选择完成之后清空选择

element.oncopy = function(e) { //监听复制事件
e.preventDefault();
let copyMsg = window.getSelection() + '商业转载请注明出处。'; // window .getSelection() 表示选择的内容
e.clipboardData.setData("Text", copyMsg); // 将复制信息添加到剪切板
}

一个简单的选择，复制粘贴就实现啦

转载于:https://www.cnblogs.com/zhubei/p/9178545.html