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>

复制代码