复制到剪切板js，兼容所有手机和pc，再附上复制成功的提示信息

本文链接：https://blog.csdn.net/ZWH1113/article/details/101782091

本文分享了一种兼容所有手机和PC的复制到剪切板的JavaScript实现方法，并且详细介绍了如何添加复制成功后的提示信息，旨在解决现有代码的兼容性问题。

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

实现思路：网上有些复制到剪切板的代码存在兼容性不足，所以想把自己常用的复制到剪切板的功能分享给大家。另外，我还额外提供了复制成功后的提示信息的js。

效果图：

全部代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>复制到剪切板+提示信息</title>
		<style type="text/css">
			.text-tip{color: #fff;font-size: 14px;background: rgba(0, 0, 0, 0.7);border-radius: 3px;position: fixed;top: 30%;left: 50%;transform: translate(-50%, -50%);padding: 6px 10px;line-height: 20px;max-width: 168px;z-index: 9999;}
			.btn_copy{font-size: 17px;color: #FFFFFF;line-height: 34px;width: 100px;height: 34px;background-image: linear-gradient(90deg, #54B7F4 2%, #5B7AE8 98%);display: block;text-align: center;border-radius: 4px;margin-top: 20px;}
		</style>
	</head>
	<body>
		<div class="copy">
			<span class="copy_txt">测试的复制文本</span>
			<div class="btn_copy">复制</div>
		</div>
		<script src="https://cdn.upchinaproduct.com/assert/zepto/1.2.0/zepto.min.js"></script>
		<script src="https://cdn.upchina.com/front/2018youxiaogu/js/copy.js"></script>
		<script type="text/javascript">
			$(".btn_copy").click(function(){
				window.copyText($('.copy_txt').text());
				if($(this).hasClass('visited')){
					textTip('已复制', 1800, function() {});
				}else{
					$(this).addClass('visited');
					textTip('复制成功', 1800, function() {});
				}
			});
			
			//文字提示信息
			function textTip(str, t, callBack) {
				t = t || 2000;
				var dom = document.createElement("p");
				dom.setAttribute('class', 'text-tip');
				dom.innerHTML = str;
				document.body.appendChild(dom);
				
				setTimeout(function() {
					document.body.removeChild(dom);
					if(callBack) {
						callBack();
					}
				}, t);
			}
		</script>
	</body>
</html>