JS实现写入指定内容到访问者剪切板

2018-8-1 22:23| 发布者: 小资源| 查看: 2406| 评论: 0|原作者: Young小杰

摘要: 近来支付宝又出红包码的活动，我看到很多群都在想破脑袋发这个红包赏金码，所以把这个可以悄悄(qiang)复(jian)制到用户手机剪切板的源码案例。

近来支付宝又出红包码的活动，我看到很多群都在想破脑袋发这个红包赏金码，所以把这个可以悄悄(qiang)复(jian)制到用户手机剪切板的源码案例。

<!doctype html>
<html lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>测试页面</title>
</head>
<body>
	<div id="copy" data-clipboard-text="这里填写被复制的红包赏金码">
		<p>准备复(qiang)制(jian)
			<br><br><br><br><br><br><br><br><br><br>
		结束</p>
	</div>

	<script src="https://cdnjs.cat.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cat.net/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

	<script>
		$("body").onclick = copycode();

		function copycode()
		{
			if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
			{
				var clipboard = new Clipboard('#copy');

				clipboard.on('success', function (e)
				{
					// 正式使用时不要提示
					// 仅为测试时使用
					alert("复制成功");
				});
				clipboard.on('error', function (e)
				{
					// 正式使用时不要提示
					// 仅为测试时使用
					alert("复制失败");
				});
			}
		}

	</script>
</body>
</html>