JS一键复制粘贴功能

最新推荐文章于 2025-05-14 11:54:03 发布

原创最新推荐文章于 2025-05-14 11:54:03 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #一键复制 #一键复制粘贴

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用轻量级插件clipboard.js实现文本的一键复制功能，无需依赖Flash，适用于现代浏览器。通过具体实例展示了如何在HTML页面中引入并使用该插件，包括样式设置和JavaScript函数调用。

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

使用clipboard.js 实现：
它是一个不需要Flash,就能实现文本复制或者剪切到剪切板的轻量级插件；
具体实例：
可以使用cdn 或者直接下载设置好引用路径。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一键复制粘贴功能</title>
		<style>
			.transfer {
				width: 90%;
				margin: 20px auto;
				font-size: 18px;
			}
			
			.transfer button {
				margin-top: -5px;
				float: right;
				margin-left: 10px;
				background-color: rgb(3, 169, 244);
				width: 30%;
				height: 25px;
				font-size: 14px;
				color: white;
				border: 0;
				border-radius: 8%;
			}
		</style>
	</head>

	<body>
		<div class="transfer">
			复制：<span id="zfb_account">11111111111</span>
			<button onclick="copy1()" data-clipboard-action="copy" data-clipboard-target="#zfb_account" id="copy_zfb">一键复制</button>
		</div>
		<div class="transfer">
			复制粘贴：<span id="wx_account">2222222</span>
			<button onclick="copy2()" data-clipboard-action="copy" data-clipboard-target="#wx_account" id="copy_wx">一键复制粘贴</button>
		</div>
		<input type="text"  id="text"/>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
	<script>
		function copy1() {
			var clipboard = new Clipboard('#copy_zfb');
			clipboard.on('success', function(e) {
				alert("复制成功！"+e.text);
				e.clearSelection(); //选中需要复制的内容
			});
			clipboard.on('error', function(e) {
				alert("当前浏览器不支持此功能，请手动复制。")
			});
		}

		function copy2() {
			var clipboard = new Clipboard('#copy_wx');
			clipboard.on('success', function(e) {
				e.clearSelection(); //选中需要复制的内容
				document.getElementById("text").value=e.text
				alert("复制成功！");
			});
			clipboard.on('error', function(e) {
				alert("当前浏览器不支持此功能，请手动复制。")
			});
		}
	</script>

</html>

在这里插入图片描述