h5 商城訂單號實現一鍵複製+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>
	</head>
	<body>
		<p class="top"><span>訂單號</span><span><str id="fe_text">1111111111111</str><i id="d_clip_button" data-clipboard-target="str">複製</i></span></p>
	</body>
</html>
<script type="text/javascript" src="js/clipboard.min.js"></script>
<script>
	var clipboard = new Clipboard('#d_clip_button');
    clipboard.on('success', function(e) {
        console.log(e);
        alert('複製成功')
    });
	clipboard.on('error', function(e) {
       console.log(e);
       alert('請重新複製')
    });
</script>d_clip_button
data-clipboard-target:標明需要複製內容所在的標籤名。d_clip_button:複製方法類型。 fe_text:包含複製文本內容的標籤id名
其他不同的複製方式不在此多說,代碼都是類似的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章