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