Menu
I want to include a button on an existing webpage that will copy text to the Windows clipboard.
The webpage and the PHP in it already works well to create and display text like this:
Output on webpage:
'Abby Normal' <[email protected]>, 'Brad Majors' <[email protected]>, 'Frank N. Furter' <[email protected]>
So now I want to add a Javascript function and an html button that calls that function to copy that output to the Windows clipboard.
Problem: nothing is copied when the button is pressed. What am I doing wrong? Thank you in advance.
<?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>
I've tried the way a Javascript tutorial suggested:
var copyText = = document.getElementById("theList");
And my own variations using PHP within Javascript:
var copyText = <?PHP echo($emails); ?>;
var copyText = `<?PHP echo($emails); ?>`;
var copyText = "<?PHP echo($emails); ?>";
var copyText = '<?PHP echo($emails); ?>';
But the result is that nothing causes any errors and nothing is copied to the clipboard.
I know the web page is being immediately saved and used because I also make a trivial change to the letters 'Click here' in the button and can see the difference after refreshing.enter code here
***UPDATE WITH ANSWER I USED:****
<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>
683
Select the text or graphics you want to copy, and press Ctrl+C. Each selection appears in the Clipboard, with the latest at the top. Optionally, repeat step 2 until you've copied all the items you want to use. Tip: After you open the Clipboard, it stores content that you copy or cut from anywhere.
Use writeText() to copy text into the clipboard. Use readText() to paste the text. Make sure you have given browser permissions for Clipboard to avoid Promise rejections.
Here is a working example I made:
There are two things you need to know.
Here is my example. To briefly explain how this works: a new temporary element of type input type='text' is created, given the value to copy to the clipboard, then the copy command is executed, then that temporary item is removed.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
