前端超简单实现复制粘贴功能 兼容安卓IOS

一、html代码示例

<div>
	<label>卡号:</label>
	<input type="text" size="20" name="IDCard" id="IDCard">
	<span class="copy" onClick="copy('IDCard')"></span>
</div>
<div>
	<label>用户名:</label>
	<input type="text" size="20" name="IDUserName" id="IDUserName">
	<span class="copy" onClick="copy('IDUserName')"></span>
</div>

二、js代码

<script type="text/javascript">
	function copy(type)
	{
		var textBox = document.getElementById(type);
		copyText(textBox);
	}

	function copyText(node) {
		if (!node) {
			return;
		}
		var result;
		var tempTextarea = document.createElement('textarea');
		document.body.appendChild(tempTextarea);
		if (typeof(node) == 'object') {
			if (node.value) {
				tempTextarea.value = node.value;
			} else {
				tempTextarea.value = node.innerHTML;
			}
		} else {
			tempTextarea.value = node;
		}
		//判断设备
		var u = navigator.userAgent;
		if (u.match(/(iPhone|iPod|iPad);?/i)) {
			window.getSelection().removeAllRanges();
			var range = document.createRange();
			range.selectNode(tempTextarea);
			window.getSelection().addRange(range);
			result = document.execCommand('copy');
			window.getSelection().removeAllRanges();

		} else {   
			tempTextarea.select();
			result = document.execCommand('Copy');
		}
		document.body.removeChild(tempTextarea);
		if (result) {
			alert('复制成功', {
				removeTime: 1000
			})
		} else {
			alert('复制失败', {
				removeTime: 1000
			})
		}

		return result;
	}
</script>
原创文章 79 获赞 56 访问量 17万+

猜你喜欢

转载自blog.csdn.net/qq_23009105/article/details/94356870