利用js复制文本框里面的内容到剪切板，并且隐藏文本框

2024年4月1日 162次阅读 来源: 原飞木

在页面中有时需要用到复制这个功能，提高用户体验。而内容是放在div中展示的不可以让用户修改。就相当于页面中有两个重复的内容，一个是用才展示给用户的，一个是用来复制的，而这个复制的用户看不到内容。

代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.btnSel {
	border: 0px;
	border-radius: 5px;
	background-color: #9f9fff;
	color: white;
}
.contentsCls {
	border: 0px;
	width: 1px;
	height: 1px;
	resize: none;
	
}
</style>

<body>
	<input class='btnSel' id="btnId" style='font-size: 11px;' type='button'
		onClick='jsCopy();' value='复制数据' />
		<!-- <div id="id1">
		asdf
		asdf
		</div> -->
	<div>
		<textarea id="contents" class="contentsCls"
			style="border: 0px; width: 0px; height: 0px; resize: none;" col="1"
			row="1" readonly="readonly">
3
1.1 1.01
-9 0.98
333 78.888</textarea>
	</div>

</body>
<script type="text/javascript">
	var flag = 1;
	function jsCopy() {
		/* var a=document.getElementById("id1").innerText;
		document.getElementById("contents").value = a; */
		var e = document.getElementById("contents"); //对象是contents   
		e.select(); //选择对象   
		tag = document.execCommand("Copy"); //执行浏览器复制命令  
		if (tag) {
			document.getElementById("btnId").value = "复制成功";
		}
		if (flag == 1) {
			flag = 2;
			document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#00CC66";
		} else {
			flag = 1;
			document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#9f9fff";
		}
	}
</script>

</html>

 

 

 

 

    原文作者：原飞木
    原文地址: https://blog.csdn.net/BushQiang/article/details/79773898
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞