二维码防伪系统

新闻中心

各种活动实时推动

利用原生js实现点击复制文本

发布时间:2024-10-19 点击次数:229
核心代码

select()方法用于选择该元素中的文本。

document.execCommand('copy')执行浏览器复制命令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			.wrapper {
				position: relative;
			}
 
			#input {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: -10;
			} 
		</style>
	</head>
	<body>
		<div class="wrapper">
			<p id="text" onclick="copyText()">需要复制的一段文字</p>
			<input id="input" value="隐藏的文本框"/>
			<!-- <textarea id="input">也可以使用文本框</textarea> -->
			<button onclick="copyText()">copy</button>
		</div>
		<script type="text/javascript">
			function copyText() {
				var text = document.getElementById("text").innerText;
				var input = document.getElementById("input");
				input.value = text; // 修改文本框的内容
				input.select(); // 选中文本
				document.execCommand("copy"); // 执行浏览器复制命令
				alert("复制成功");
			}
		</script>
	</body>
</html>

copy © 2025 星澜网络 All Rights Reserved

备案号:鲁ICP备2023015769号