青岛网站建设新闻资讯

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

时间:2023-12-20 已阅读:493次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

核心代码

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>



二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1435.html

相关资讯

Copyright © 2011-2024 青华互联-青岛青华锐思网络科技有限公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图