点击按钮复制文本框内容

点击按钮复制文本框内容

复制文本框内容的方法如下:

function Copy(){
	var e=document.getElementById("content");//对象是content
	if (e.value != "") {
		e.select();//选择对象
		document.execCommand("Copy");//执行浏览器复制命令
		alert("复制成功!");
	}else{
		alert("文本框不能为空!");
	}
}

该对象只能是文本框,例如:< textarea id=“content”></ textarea>< input id=“content” />
文本框中必须有内容,没有内容也就没有复制的对象。
文本框不能隐藏,例如:type=“hidden”style=“display: none”;就不能实现复制。

Html网页代码如下:

<body>
	<textarea id="content">今天你要嫁给我</textarea>
	<input type="button" value="复制" onclick="Copy()">
</body>

想要复制的内容不是文本框中的也可以,如下图并没有看到文本框,在该页面点击复制按钮可以复制发送内容。
《点击按钮复制文本框内容》

该页面有文本框并且没有隐藏,如果隐藏文本框就不能实现复制功能了。其实可以使用z-index来进行覆盖从而达到“隐藏”效果,如下:

<div>发送内容</div>
<input id="content" style="float:left;z-index:-1;position:absolute;">
<div style="background-color:#ddd"  id="divAlready">
	<span>【雷雷商贸有限公司电子对账单】尊敬的客户:到目前为止您累计欠款为¥990000.00,请您核实。详细请点击网页链接:</span>
	<a target="_blank" href="https://zhsmjxc.com/">
	<span id="url">https://zhsmjxc.com/</span>
	</a>
	<span>。</span>
</div>

“隐藏”了文本框之后,复制方法只需给文本框的value赋值为发送内容即可。如下:

<!-- jquery插件 -->
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<!-- layer提示框插件 -->
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
	function Copy(){
		var a = $("#divAlready").find("span").text();  
		$("#content").val(a);
		var e = document.getElementById("content");//对象是content 
		e.select();//选择对象
		document.execCommand("Copy");//执行浏览器复制命令
		layer.alert("复制成功", { icon: 1 });
	}
</script>
    原文作者:新鑫S
    原文地址: https://blog.csdn.net/weixin_44547599/article/details/95757385
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞