When copy to clipboard button is clicked the page scrolls to the bottom

Question

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:

        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>"; 
}


?>
<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 }
    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>

Answer 1

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.

Answer 2

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( ()=>{
                        console.info( '%s\n\n%cCopied!', this.parentNode.textContent.replace(/\ /gi,''),'color:red' );
                        alert( 'Copied' );
                    })
                    .catch( err=>alert( err ) )
            }))
        </script>
    </body>
</html>