Bea*_*ar. 5 html javascript php clipboard
我想在现有网页上包含一个按钮，用于将文本复制到 Windows 剪贴板。
网页和其中的 PHP 已经可以很好地创建和显示这样的文本：
网页输出：
'Abby Normal' <abnormal@rockyhorror.com>, 'Brad Majors' <bm@rockyhorror.com>, 'Frank N. Furter' <franknfurter@rockyhorror.com>
所以现在我想添加一个 Javascript 函数和一个 html 按钮，调用该函数将该输出复制到 Windows 剪贴板。
问题：按下按钮时不会复制任何内容。我究竟做错了什么？先感谢您。
<?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>
这是我制作的一个工作示例：
有两件事你需要知道。
这是我的例子。简要说明这是如何工作的：创建一个类型为input type='text'的新临时元素，给定要复制到剪贴板的值，然后执行复制命令，然后删除该临时项。
copyToClipboard(document.getElementById("content"));
document.getElementById("clickCopy").onclick = function() {
copyToClipboard(document.getElementById("goodContent"));
}
document.getElementById("clickCopyString").onclick = function() {
copyToClipboard("This is a variable string");
}
/**
* This will copy the innerHTML of an element to the clipboard
* @param element reference OR string
*/
function copyToClipboard(e) {
var tempItem = document.createElement('input');
tempItem.setAttribute('type','text');
tempItem.setAttribute('display','none');
let content = e;
if (e instanceof HTMLElement) {
content = e.innerHTML;
}
tempItem.setAttribute('value',content);
document.body.appendChild(tempItem);
tempItem.select();
document.execCommand('Copy');
tempItem.parentElement.removeChild(tempItem);
}div {
border: 1px solid black;
margin: 10px;
padding: 5px;
}<div id="content">
This is example text which will NOT be copied to the clipboard.
</div>
<div id="goodContent">
This WILL be copied to the cliboard when you push the button below:
</div>
<button id="clickCopy">
Copy Text from 2nd
</button>
<button id="clickCopyString">
Copy STRING to Clibpoard from Variable
</button>| 归档时间： |
|
| 查看次数： |
22871 次 |
| 最近记录： |