js实现一键复制（可用于复制微信号）

最新推荐文章于 2025-06-11 09:27:17 发布

qq_Achen

最新推荐文章于 2025-06-11 09:27:17 发布

阅读量8.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_26173001/article/details/81042466

本文介绍了在移动端如何实现一键复制微信号的两种方法。一种是通过长按复制文本，另一种是利用clipboard.min.js库实现一键复制。具体实现包括下载clipboard.min.js文件，并通过定位隐藏的input元素来达到复制效果。

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

移动端有时候需要显示微信，但是扫码不方便所以使用复制文本的效果来代替。

第一种就是显示文本（也就是微信号），通过长按复制文本来达到复制效果。

第二种就是【一键复制】，例如网新科技的手机端底部的微信复制功能（http://m.ibw.cn）

实现方法：

1.先下载文件clipboard.min.js，其官网上压在压缩包后直接找到js文件clipboard.min.js即可。

2.由于微信号这里的input直接隐藏就无法复制，所以只能定位到不在可视页面上显示来当做隐藏的效果。

使用代码

<script src="js/clipboard.min.js"></script>
<div style="position:absolute; top:-9999em; left:-9999em; z-index:-999;"><input id="foo" type="text" value="这里修改成你的微信号"></div>

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">微信咨询</button>

<script>
	var clipboard = new ClipboardJS('.btn');
	clipboard.on('success', function(e) {
		console.log(e);
		alert("微信号已复制成功，请到微信直接粘贴，加好友专业营销顾问一对一为您服务")
	});
	clipboard.on('error', function(e) {
		console.log(e);
	});
</script>