极客观点
项目管理
HarmonyOS
我想在现有网页上添加一个按钮，用于将文本复制到 Windows 剪贴板。
该网页和其中的 PHP 已经可以很好地创建和显示如下文本：
网页输出：
'Abby Normal' <abnormal@rockyhorror.com>, 'Brad Majors' <bm@rockyhorror.com>, 'Frank N. Furter' <franknfurter@rockyhorror.com>
所以现在我想添加一个 Javascript 函数和一个调用该函数以将该输出复制到 Windows 剪贴板的 html 按钮。
问题：按下按钮时没有复制任何内容。我究竟做错了什么？先感谢您。
<?PHP
session_start();
include('include/_initsess.php');
include('include/_setdb.php');
if(!isset($_SESSION['userlist'])) exit;
$users = $_SESSION['userlist'];
$emails = '';
$qry = "SELECT FIRST,LAST,EMAIL FROM users WHERE PKEY IN ($users)";
$result = mysql_query($qry);
$numrows = mysql_num_rows($result);
for ($m=0; $m<$numrows; $m++) {
$row = mysql_fetch_array($result);
list($fn,$ln,$em) = $row;
$emails .= ($m==0) ? "'".$fn." ".$ln."' <".$em.">" : (", '".$fn." ".$ln."' <".$em.">");
} // end for
?>
<html>
<head>
</head>
<body>
<span class=mono id="theList" value="<?php echo $emails; ?>">
<?PHP echo($emails); ?>
</span>
<script>
function copyToClipboardWithJavascript() {
/* Get the text field */
var copyText = document.getElementById("theList");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
}
</script>
<button onclick="copyToClipboardWithJavascript()">Click here</button>
</span>
</body>
</html>
我尝试了 Javascript 教程建议的方式：
var copyText = = document.getElementById("theList");
以及我自己在 Javascript 中使用 PHP 的变体：
var copyText = <?PHP echo($emails); ?>;
var copyText = `<?PHP echo($emails); ?>`;
var copyText = "<?PHP echo($emails); ?>";
var copyText = '<?PHP echo($emails); ?>';
但结果是没有任何错误，也没有任何内容被复制到剪贴板。
我知道该网页正在立即保存和使用，因为我还对按钮中的字母“单击此处”进行了微不足道的更改，刷新后可以看到不同之处。 enter code here
***更新我使用的答案：****
<span class=mono id="theList">
<?PHP echo($emails); ?>
</span>
<button id="copyButton" onclick="myCopyFunction()">Copy email address list to clipboard.</button>
<script>
function myCopyFunction() {
var myText = document.createElement("textarea")
myText.value = document.getElementById("theList").innerHTML;
myText.value = myText.value.replace(/</g,"<");
myText.value = myText.value.replace(/>/g,">");
document.body.appendChild(myText)
myText.focus();
myText.select();
document.execCommand('copy');
document.body.removeChild(myText);
}
</script>
原文由 Bear. Teddy Bear. 发布，翻译遵循 CC BY-SA 4.0 许可协议
这是我制作的一个工作示例：
有两件事你需要知道。
这是我的例子。简要解释一下这是如何工作的：创建一个新的类型为 input type=‘text’ 的临时元素，将值复制到剪贴板，然后执行复制命令，然后删除该临时项目。