天天看點

js 實作 複制 功能

<!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