Web功能之复制粘贴剪切板

最新推荐文章于 2025-07-15 12:59:02 发布

Alphamilk

最新推荐文章于 2025-07-15 12:59:02 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： css html javascript

本文链接：https://blog.csdn.net/dogxixi/article/details/130373881

本文展示了如何使用HTML、CSS和JavaScript实现一个简单的网页文本复制功能。通过创建Range对象，选择元素节点文本，然后执行复制命令到剪切板。同时，文章还提及了Range对象在富文本编辑器和拖拽操作中的应用。

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

一.展示

1.代码展示

<!DOCTYPE html>
<html>
<head>
	<title>Copy Text to Clipboard</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		p{
			text-indent: 2em;
		}
		div{
		 width: 500px;
		 height: 800px;
		 margin: 0 auto;
		 margin-top: 50px;
		 background-color: #282c34;
		 color: #abb2bf;
		 font-size: 20px;
		 font-family: 幼圆;
		 position: relative;
		}
		
		button{
			width: 40px;
			height: 30px;
			position: absolute;
			right: 0;
			color: white;
			background-color: black;
			cursor: pointer;
			border: none;
			text-align: center;
		}
		button:hover{
			background-color: #9999AA;
			color: #ffffff;
			
		}
		#text-to-copy .head{
			padding-top: 33px;
			text-indent: 2em;
		}
	</style>
</head>
<body>
	<!-- 点击按钮后将该div块内的文本内容复制到剪切板 -->
	<div id="text-to-copy">
		<button onclick="copyText()">Copy</button>
		<p class="head">中国共产党第二十次全国代表大会，是在全党全国各族人民迈上全面建设社会主义现代化国家新征程、向第（  ）个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。</p>
		<p>面对突如其来的新冠肺炎疫情，我们坚持（  ），坚持动态清零不动摇，开展抗击疫情人民战争、总体战、阻击战，最大限度保护了人民生命安全和身体健康，统筹疫情防控和经济社会发展取得重大积极成果</p>
		<p>全党同志务必不忘初心、（  ），务必谦虚谨慎、艰苦奋斗，务必敢于