浅谈 JS 复制

最近帮朋友做了个简单的小程序,需要点击按钮实现复制 用户名的功能,使用  window.clipboardData 实现了 IE 下的复制功能,遇到 Chrome 就没办法了。百度发现了 Zepto.js,非常好用。

周末闲来无事,发现Chrome/Firefox 支持 Window.getSelection,做了简单的封装,替换掉 Zepto.js,有简化掉了很多代码。

代码比较简单,测试地址:http://www.miaoqiyuan.cn/products/copy.html,代码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS复制 演示/支持IE、Chrome,兼容电脑、手机 - miaoqiyuan.cn</title>
	<style type="text/css">
	html {}

	body {
		margin: 0;
		background: #EEE;
	}

	h2 {
		text-align: center;
		font-family: 'Microsoft Yahei';
	}

	button {
		float: right;
	}

	.demo-list {
		width: 300px;
		margin: 10px auto;
	}

	.demo-list-item {
		background: #FAFAFA;
		border: solid 5px #DDD;
		border-radius: 15px;
		padding: 15px;
		margin-top: 15px;
	}
	</style>
	<script type="text/javascript">
	function copy(domId) {
		if (copyDom(document.getElementById(domId))) {
			alert('复制成功');
		} else {
			alert('当前浏览器不支持');
		}
	}

	function copyDom(dom) {
		if ('clipboardData' in window) {
			window.clipboardData.setData('Text', dom.value || dom.innerText || dom.innerHTML);
		} else if ('execCommand' in document && 'getSelection' in window) {
			var domType = 'input';
			try {
				dom.select();
			} catch (e) {
				domType = 'text';
				window.getSelection().selectAllChildren(dom);
			}
			document.execCommand("Copy");
			if (domType == 'input') {
				dom.blur();
			} else {
				window.getSelection().empty();
			}
		} else {
			return false;
		}
		return true;
	}
	</script>
</head>

<body>
	<h2><a href="http://www.miaoqiyuan.cn/p/js-copy">JS复制 演示/支持IE、Chrome,兼容电脑、手机</a></h2>
	<div class="demo-list">
		<div class="demo-list-item">
			<button onclick="copy('demo_div');">复制</button>
			<div id="demo_div">DIV</div>
		</div>
		<div class="demo-list-item">
			<button onclick="copy('demo_input');">复制</button>
			<input id="demo_input" value="INPUT"><br >(不支持iPhone)
		</div>
		<div class="demo-list-item">
			<button onclick="copy('demo_textarea');">复制</button>
			<textarea id="demo_textarea">TEXTAREA</textarea><br >(不支持iPhone)
		</div>
		<div class="demo-list-item">
			<button onclick="copy('demo_divs');">复制</button>
			<div id="demo_divs">
				<p>DIVS</p>
				<p>DIVS</p>
			</div>
		</div>
		<div class="demo-list-item">
			<img width="100%" src="data:image/png;base64,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">
		</div>
	</div>
</body>

</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.