一键复制粘贴

最新推荐文章于 2024-08-16 15:55:37 发布

约嫦娥烤兔子

最新推荐文章于 2024-08-16 15:55:37 发布

阅读量4.1k

点赞数 3

分类专栏： JS 文章标签：一键复制 web JS

本文链接：https://blog.csdn.net/qq_41362025/article/details/81448785

版权

JS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一键复制粘贴功能需要用到一个轻量级的JS插件：clipboard.js。

官网地址：https://clipboardjs.com

下载到本地后，将其放入项目中，直接引用即可。具体实现代码如下：

<!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" />
	</body>

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

</html>

后续补充：

在复制粘贴时，第二次点击就会弹出两次复制成功，第三次点击就会弹出三次，原因是每次点击后执行实例化一个clipboard对象，之前的clipboard对象并没有销毁，所以就会弹出多次。解决方法是：每次使用完成后销毁clipboard对象，这样既能解决现在的问题，也可以释放内存，优化代码。代码如下：无论复制成功或失败，都需要clipboard.destroy()。

function copy1() {

       var clipboard = new Clipboard('#copy_zfb');

       clipboard.on('success', function(e) {

           e.clearSelection(); //选中需要复制的内容

           alert("复制成功！");

          clipboard.destroy();

       });

       clipboard.on('error', function(e) {

           alert("当前浏览器不支持此功能，请手动复制。")

           clipboard.destroy();

       });

    }

注意：如果你在项目中使用了其他的前端框架或者插件，有可能会与clipboard.js插件产生冲突。解决方法，可以使用<iframe/>标签，将此部分代码放在一个新的html文件中，然后在主文件中使用<iframe/>标签引入。

本人为JS实习生一枚，不断学习，不断进步，欢迎各位前辈批评指教。