JQuery 實現複製粘貼文本

時間 2019-11-09

標籤 jquery 實現複製粘貼文本欄目 JQuery 简体版

原文原文鏈接

ipt.select();

選擇複製的內容(input.value)，只在input框有效javascript

document.execCommand("Copy");

執行瀏覽器複製命令css

`<textarea id="ipt">待複製的內容</textarea>`

文本域，input框都支持 $('#ipt').select() || var ipt = document.getElementById('ipt') .select();html

其餘標籤好比:<span id="ipt">789654</span> 會報錯 java

<!DOCTYPE html>
<html>

	<head>
		<title>JQuery複製粘貼文本</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<style type="text/css">
			.wrap {
				width: 300px;
				height: 150px;
				border: 1px solid black;
				margin: auto;
				text-align: center;
				background: linear-gradient(to right, #efac2b 0%, #fe83b0 100%);
			}
			
			.wrap .copy {
				width: 150px;
				height: 25px;
				line-height: 25px;
				border: 1px solid #ef5454;
				border-radius: 10px;
				margin: 16px auto;
			}
			
			input {
				width: 70px;
				height: 25px;
				margin-left: 16px;
			}
			
			.textCode {
				position: relative;
				margin: 16px 0;
				display: inline-block;
			}
			
			#copyBtn,
			#copyBtnIos,
			#copySpan {
				color: black;
			}
			
			#ipt,
			#iptIos,
			#iptSpan {
				border: 0;
				outline: none;
				background-color: rgba(0, 0, 0, 0);
			}
			/* 消息提醒 */
			
			#message {
				width: 99px;
				display: none;
				color: #fffefd;
				font-size: 16px;
				margin: auto;
				text-align: center;
				background: brown;
				border-radius: 20px;
				height: 30px;
				line-height: 30px;
			}
		</style>
	</head>

	<body>
		<h3>安卓複製</h3>
		<div class="wrap">
			<span class="textCode">註冊後輸入邀請碼得到免費體驗機會</span>
			<p class="copy" id="copy">
				<!--<textarea id="copy">待複製的內容</textarea>-->
				<input type="text" id="ipt" readonly="readonly" value="安卓688">
				<span id="copyBtn">複製</span>
			</p>
			<!-- 消息提醒 -->
			<div id='message'></div>
		</div>
		<br />
		<br />
		<br />
		<h3>IOS複製</h3>
		<div class="wrap">
			<span class="textCode">兼容IOS複製粘貼</span>
			<p class="copy" id="copyIos">
				<!--<textarea id="copyIos">待複製的內容</textarea>-->
				<input type="text" id="iptIos" readonly="readonly" value="ios688">
				<span id="copyBtnIos">複製</span>
			</p>
			<!-- 消息提醒 -->
			<div id='message'></div>
		</div>
		<br />
		<br />
		<br />
		<h3>除input|textarea等標籤，複製</h3>
		<div class="wrap">
			<span class="textCode">span等標籤複製粘貼</span>
			<p class="copy" id="copySpan">
				<span style="cursor: pointer" onclick="" class="btnSpan" id="foo" data-clipboard-target="#foo" data-clipboard-action="copy">
					span688
				<span id="copyBtnSpan">複製</span>
			</p>
			
			<!-- 消息提醒 -->
			<div id='message'></div>
		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<!--下載clipboard.js   能夠參考http://www.clipboardjs.cn/ -->
		<script src="clipboard.js"></script>
		<script type="text/javascript">
			//安卓
			$('#copyBtn').on('click', function() {
				$("#ipt").select(); //複製內容
				document.execCommand("Copy"); // 執行瀏覽器複製命令
				$('#message').html('複製成功');
				$('#message').show();
				setTimeout(function() {
					$('#message').hide();
				}, 3000)
			})

			//ios 單獨處理
			function selectText(textbox, startIndex, stopIndex) {
//				console.log(textbox, startIndex, stopIndex)
				if(window.navigator.userAgent.toLowerCase().indexOf('iphone') !== -1) { //ios
					try {
						textbox.setSelectionRange(startIndex, stopIndex);
						textbox.focus();
					} catch(e) {
						//TODO handle the exception
						alert(JSON.stringify(e))
					}
				} else { //firefox/chrome
					textbox.select();
				}
			}

			$('#copyBtnIos').on('click', function() {
				var ipt = $('#iptIos');
				var len = $('#iptIos').val().length;
				selectText(ipt, 0, len);
				ipt.select(); //複製內容
				if(document.execCommand("Copy")) {
					$('#message').html('複製成功');
				} else {
					$('#message').html('複製失敗');
				}

			})

			//span標籤複製粘貼
			var clipboard = new ClipboardJS('.btnSpan');
			clipboard.on('success', function(e) {
//						console.info('Action:', e.action);
//						console.info('Text:', e.text);
//						console.info('Trigger:', e.trigger);
				alert('複製成功');
			});
			clipboard.on('error', function(e) {
				console.error('Action:', e.action);
				console.error('Trigger:', e.trigger);
			})
		</script>
	</body>

</html>

複製代碼