<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" >
<title>注冊</title>
</head>
<style>
*{
-webkit-touch-callout: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
input {
-webkit-user-select:auto;
}
</style>
<body>
<input id="foo1" value="需要複制的内容資訊(input标簽屬性不能設定disabled)" readonly="readonly">
<!-- <div class="the_btn_con">
<button class="btn" data-clipboard-target="#foo1">複制</button>
</div> -->
<button class="copy" data-clipboard-target="#foo1" data-clipboard-action="copy" style="color: #5c5959;text-align: center;font-size: 12px;height: 40px;border: 0px solid #fff;background: 000;">
點選複制邀請碼:(點選标簽必須用button才能相容ios)
</button>
//不需要另外的input當觸發器的時候可以直接把要複制的内容指派給點選元素
//<a href="javascript:void(0);" target="_blank" rel="external nofollow" class="copy" data-clipboard-text="複制的内容">複制</a>
<!-- <script type="text/javascript" src="jquery.js"></script> -->
<script type="text/javascript" src="clipboard.js"></script>
<script type="text/javascript" src="clipboard.min.js"></script>
<!-- <script> //簡單的pc複制
$(function () {
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
alert('複制成功!')
console.log($(this))
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('複制失敗,請長按複制!')
});
})
</script> -->
<script>
var clipboard = new ClipboardJS('.copy');
clipboard.on('success', function(e){
console.log(e);
document.getElementById('foo1').blur();
alert('複制成功啦!');
});
clipboard.on('error', function(e){
alert('複制失敗,請長按複制!');
});
</script>
</body>
</html>
注意:input标簽不能設定屬性:disabled
複制标簽使用button才相容IOS、Android
源代碼提取連結: https://pan.baidu.com/s/112NFETMDADTiT2jJJUaCow 提取碼: tyvr