原生js粘贴复制【源码】

最新推荐文章于 2023-06-25 14:58:46 发布

weixin_34146986

最新推荐文章于 2023-06-25 14:58:46 发布

阅读量168

点赞数

原文链接：http://www.cnblogs.com/webSong/p/8985858.html

版权

<html>
<head>
	<meta charset="UTF-8">
	<title>9行代码实现复制内容至剪切板</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit">
  <style>
	  body {
	  	padding: 36px;
	  	display: flex;
	  	flex-direction: column;
	  	align-items: center;
	  }
  	.ma-btn {
			border-radius: 4px;
			background: #53a5ec;
			color: #fff;
			font-size: 14px;
			padding: 0.8em 1.6em;
			user-select: none;
			-webkit-appearance: none;
			cursor: pointer;
			text-align: center;
		}
		.ma-btn.extra {
			width: 72px;
			margin-top: 36px;
		}
  </style>
</head>
<body>
	<div class="copy--text copy_text" id="copy">复制到剪贴板的内容</div>
	<div class="ma-btn extra copy_btn">复制</div>
	<script>
		var btn = document.querySelectorAll(".copy_btn")[0],
				copy_text = document.querySelectorAll(".copy_text")[0];
		btn.addEventListener("click",function() {
			copy(copy_text);
		},false); 

		function copy(el) {
			var range = document.createRange();
			var end = el.childNodes.length;
			range.setStart(el,0);
			range.setEnd(el,end);

			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);
			document.execCommand("copy",false,null);
			selection.removeRange(range);
		}
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/webSong/p/8985858.html

weixin_34146986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js粘贴复制【源码】

<html><head> <meta charset="UTF-8"> <title>9行代码实现复制内容至剪切板</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, use...
复制链接

扫一扫