When a button is clicked it will scroll to the bottom of the page automatically. I can't see the reason in the code why it is doing it. Is there something I am missing?
Code:
for ($x=0; $x<$numresults; $x ) { //display the results
$sam=$info[$x]['samaccountname'][0];
$disp=$info[$x]['displayname'][0];
$dir=$info[$x]['homedirectory'][0];
$displayout=substr($sam, 0, 4);
echo "User Name : $sam";
echo "<br>Name : $disp";
echo "<br>Home Drive : <a class=clear href=$dir>$dir</a><br>";?>
<p id="demo<?php echo $x; ?>"style="position:absolute;left:-1000px;top:-1000px;">
<?php echo $dir ?>
</p>
<button onclick="copy('demo<?php echo $x; ?>')">Copy Home Drive</button> <br><br>
<?php }
echo "</div>";
}
else echo "</div><div><br><a class=clear href=javascript:history.go(-1)>Search again</a></div>";
ldap_close($cnx);
?>
<script>
function copy(element_id) {
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
</script>
Thanks
Here is the updated code. After testing Professor Abronsius method it seems to cause the page to not load. Am I missing anything? <?php
$LDAPFieldsToFind=array
("homedirectory", "displayname", "samaccountname"); //The data we want to find from the search
$numresults=$info["count"];
echo"<div style='position: fixed; float: right; padding-left: 450px;'><a class=clear href=javascript:history.go(-1)>Search again</a></div>";
echo "<div><p>There are <b>$numresults</b> results for your search '<i><b>$SearchFor</i></b>'";
if ($numresults>0){
echo " these are:</p></div>";
echo "<div>";
<?php foreach( $info as $arr ){
$obj=(object)$arr;
printf(
'<div >
<div>Username: %1$s</div>
<div>Name: %2$s</div>
<div>Homedrive: <a href="%3$s">%3$s</a></div>
<button>Copy Home Drive</button>
</div>',
$obj->samaccountname[0],
$obj->displayname[0],
$obj->homedirectory[0]
);
}
?>
<?php }
echo "</div>";
}
else echo "</div><div><br><a class=clear href=javascript:history.go(-1)>Search again</a></div>";
ldap_close($cnx);
?>
<script>
document.querySelectorAll('div.usr button').forEach(bttn=>bttn.addEventListener('click',function(e){
navigator.clipboard.writeText( this.parentNode.textContent )
.then(()=>{
alert( 'Copied' )
})
.catch( err=>alert( err ) )
}))
</script>
CodePudding user response：
Just use this instead:
navigator.clipboard.writeText(text)
And the scrolling most likely happens because you are selecting text on a new element that is appended to the bottom of the page.
CodePudding user response：
Disclaimer: This snippet will display an error message but the code works OK when hosted on own server!
A much cleaner method, imo, to the copying of data can be done with the reasonably new Clipboard API - removes the need for adding elements off-screen, appending new elements and deleting them as you were. This also should prevent the scrolling mentioned as that was a byproduct of inadvertantly using focus on your recently added div element.
As your original code uses several br tags to separate displayed items it would be easier ( from a both styling and DOM manipulation/interrogation perspectives ) to use a common parent element for each set of results. You could possibly rewrite the loop logic as follows:
foreach( $info as $arr ){
$obj=(object)$arr;
printf(
'<div class="usr">
<div>Username: %1$s</div>
<div>Name: %2$s</div>
<div>Homedrive: <a href="%3$s">%3$s</a></div>
<button>Copy Home Drive</button>
</div>',
$obj->samaccountname[0],
$obj->displayname[0],
$obj->homedirectory[0]
);
}
And then the rendered content then might appear as follows, for example:
document.querySelectorAll('div.usr button').forEach(bttn=>bttn.addEventListener('click',function(e){
navigator.clipboard.writeText( this.parentNode.textContent )
.then(()=>{
alert( 'Copied' )
})
.catch( err=>alert( err ) )
}))<div class="usr">
<div>Username: Big_G</div>
<div>Name: Geronimo</div>
<div>Homedrive: /nas-vol1/geonimo</div>
<button>Copy Home Drive</button>
</div>
<div class="usr">
<div>Username: Poca</div>
<div>Name: Pocahontas</div>
<div>Homedrive: /nas-vol2/pocahontas</div>
<button>Copy Home Drive</button>
</div>
<div class="usr">
<div>Username: Chief_SB</div>
<div>Name: SittingBull</div>
<div>Homedrive: /nas-vol1/SittingBull</div>
<button>Copy Home Drive</button>
</div>
<div class="usr">
<div>Username: Tonto</div>
<div>Name: TomTom</div>
<div>Homedrive: /nas-vol2/TomTom</div>
<button>Copy Home Drive</button>
</div>update: complete test page to illustrate the copy of text
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Copy Active Directory Info</title>
</head>
<body>
<div class="usr">
<div>Username: Big_G</div>
<div>Name: Geronimo</div>
<div>Home drive: /nas-vol1/geonimo</div>
<button>Copy Home Drive</button>
</div>
<div class="usr">
<div>Username: Poca</div>
<div>Name: Pocahontas</div>
<div>Home drive: /nas-vol2/pocahontas</div>
<button>Copy Home Drive</button>
</div>
<div class="usr">
<div>Username: Chief_SB</div>
<div>Name: SittingBull</div>
<div>Home drive: /nas-vol1/SittingBull</div>
<button>Copy Home Drive</button>
</div>
<div class="usr">
<div>Username: Tonto</div>
<div>Name: TomTom</div>
<div>Home drive: /nas-vol2/TomTom</div>
<button>Copy Home Drive</button>
</div>
<script>
document.querySelectorAll('div.usr button').forEach( bttn=>bttn.addEventListener('click',function(e){
navigator.clipboard.writeText( this.parentNode.textContent )
.then(()=>{
navigator.clipboard.readText()
.then( text=>{
console.info( '%s\n\n