点击按钮复制文本框内容
复制文本框内容的方法如下:
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>