JS一键复制粘贴功能

本文介绍如何使用轻量级插件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>

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MichaelYZ111

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值