我正在尝试设置一个页面,其中有按钮列表,列(签名,返回,查询等)。目前文本是内置在文本区功能,见:
<td>
<b>PartSelect</b>
<br />
<textarea id="copyTarget"
cols="25"
rows="3">Customer Service www.partselect.com 888-895-1535
</textarea>
<br />
<button id="copyButton">Copy</button>
</td>
一旦我弄清楚了这部分代码,我将从MySQL数据库中提取textarea值,但我可以这样做。现在,我正试图使用style:hidden;
,它确实隐藏了文本区域,但失去了复制功能。Javascript函数代码如下:
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("copyTarget"), "msg");
});
正如我所说的,当字段可见时,它可以工作,但是当我隐藏文本区域时,它就停止工作了。有解决办法吗?
作为参考,如果需要,MySQL中的表使用以下信息:
数据库和表名为templates
,列为id
category
shortname
longname
text
试试这个:
$(document).ready(function(){
$msg = "";
$("#copyButton").on("click",function(){
$msg = $("#copyTarget").text();
$("#copyTarget").text("");
$(this).prop({disabled:true});
$("#pasteButton").removeAttr("disabled");
})
$("#pasteButton").on("click",function(){
$("#pasteTxt").val($msg);
$(this).prop({disabled:true});
$("#copyButton").removeAttr("disabled");
$msg = "";
})
})
最终代码:
<html>
<title>This is test</title>
<head>
</head>
<body>
<td>
<b>PartSelect</b><br />
<textarea id="copyTarget" cols="25" rows="3">Customer Service www.partselect.com 888-895-1535</textarea>
<br />
<button id="copyButton">Copy</button>
<button id="pasteButton" disabled>Paste</button>
<br><br>
<input type="text" id="pasteTxt" size="50">
</td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$msg = "";
$("#copyButton").on("click",function(){
$msg = $("#copyTarget").text();
$("#copyTarget").text("");
$(this).prop({disabled:true});
$("#pasteButton").removeAttr("disabled");
})
$("#pasteButton").on("click",function(){
$("#pasteTxt").val($msg);
$(this).prop({disabled:true});
$("#copyButton").removeAttr("disabled");
$msg = "";
})
})
</script>
</body>
</html>