js一键复制+clipboard.js（pc，ios,android均可使用）一个页面多个复制按钮

husky花

已于 2022-05-18 17:29:04 修改

阅读量3.5k

点赞数

分类专栏： jq插件文章标签： js jq插件 clipboard.js 兼容复制到剪贴板

于 2018-03-19 13:51:42 首次发布

本文链接：https://blog.csdn.net/hflxia/article/details/79609772

版权

jq插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在移动项目中订单号复制功能，兼容pc和ios、android

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width:100;
			}
			p{
				height:40px;
				width:100%;
			}
			i{
				color:#D72926;
			}
		</style>
		<script src="jquery.js"></script>
	</head>
	<body>
		<p class="top"><span>订单号</span><span><str class="fe_text">1111111111111</str><i id="fe_text" class="copy-btn" data-clipboard-target=".fe_text">复制</i></span></p>
		<p class="top"><span>订单号</span><span><str class="fe_text1">222222222222</str><i id="fe_text1" class="copy-btn" data-clipboard-target=".fe_text1">复制</i></span></p>
		<p class="top"><span>订单号</span><span><str class="fe_text2">333333333333</str><i id="fe_text2" class="copy-btn" data-clipboard-target=".fe_text2">复制</i></span></p>
		<p class="top"><span>订单号</span><span><str class="fe_text3">444444444444</str><i id="fe_text3" class="copy-btn" data-clipboard-target=".fe_text3">复制</i></span></p>
		<p class="top"><span>订单号</span><span><str class="fe_text4">555555555555</str><i id="fe_text4" class="copy-btn" data-clipboard-target=".fe_text4">复制</i></span></p>
	</body>
</html>
<script type="text/javascript" src="js/clipboard.min.js"></script>
<script>
	$('.copy-btn').click(function(){
			let id = $(this).attr('id')
			copy('#'+id)
		})
	function copy(id){
		let clipboard = new ClipboardJS(id);
		clipboard.on('success', function(e) {
			console.log(e);
			alert('复制成功')
			clipboard.destroy();//解决多次弹窗问题
		});
		clipboard.on('error', function(e) {
			 console.log(e);
			 alert('请重新复制')
			 clipboard.destroy();//解决多次弹窗问题
		});
	}
</script>
//data-clipboard-target：标明需要复制内容所在的标签名。id：操作按钮的id。 fe_text：包含复制文本内容的标签类名