点击按钮复制文本框内容

超、凢脫俗 2021-12-10 09:29 420阅读 0赞

# 点击按钮复制文本框内容 #

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

> 该对象只能是文本框，例如：**< 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>

想要复制的内容不是文本框中的也可以，如下图并没有看到文本框，在该页面点击复制按钮可以复制发送内容。  
![在这里插入图片描述][20190713154759301.gif]

该页面有文本框并且没有隐藏，如果隐藏文本框就不能实现复制功能了。其实可以使用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赋值为发送内容即可。如下：

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    
    <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>

[20190713154759301.gif]: /images/20211210/448b4d1c630b4c6594f86b0ea38a68b5.png