JS 实现一键复制(复制DIV)

Stuild Stuil

已于 2023-07-14 12:40:39 修改

阅读量1.4k

点赞数 1

文章标签： javascript 前端 html

于 2023-07-14 12:33:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35086097/article/details/131720899

版权

该文章介绍了如何利用JavaScript实现HTML元素内容的复制功能。通过获取指定ID的标签，设置文档范围，选取内容，清除并添加选择范围，最后执行复制命令到剪贴板，从而达到复制文本的目的。

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

话不多说直接上代码：

JS部分

function copyDivContent(divId) {
		// 获取标签内容
		const div = document.getElementById(divId);
		// 创建文档区域
		const range = document.createRange();
		//曲遇范围边界设置为一个节点的子节点。
		range.selectNodeContents(div);
		// 获取当前位置
		const selection = window.getSelection();
		// 清空
		selection.removeAllRanges();
		// 添加
		selection.addRange(range);
		// 执行赋值操作
		document.execCommand('copy');
	}

使用

		<button type="button" id="copy" onclick="copyDivContent('div11')" class="btn btn-primary btn-block btn-flat loginBtn" >复制</button>

	<div id="div11" class="login-title1"><span>oooooopppp</span>11111111</div>

大概思路或者流程就是

1.获取要复制内容所在的标签

2.设置区域范围及起始位

3. 获取（选择，即文本选中状态）选中的内容

4.清空再添加，每次复制或者选择的内容都是最新的

5.执行复制操作（execCommand）到粘贴板