点击按钮复制文本框内容

最新推荐文章于 2024-04-24 10:28:14 发布

新鑫S

最新推荐文章于 2024-04-24 10:28:14 发布

阅读量2.6k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44547599/article/details/95757385

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

点击按钮复制文本框内容

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

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

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
点击按钮复制文本框内容

点击按钮复制文本框内容复制文本框内容的方法如下：function Copy(){ var e=document.getElementById("content");//对象是content if (e.value != "") { e.select();//选择对象 document.execCommand("Copy");//执行浏览器复制命令 alert("复制成功！");...
复制链接

扫一扫