天天看點

js一鍵複制+clipboard.js(pc,ios,android均可使用) 一個頁面多個複制按鈕

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:包含複制文本内容的标簽類名