时间戳

首页 > 解决方案 > 单击复制到剪贴板按钮时，页面滚动到底部

javascript - 单击复制到剪贴板按钮时，页面滚动到底部

问题描述

单击按钮时，它将自动滚动到页面底部。我在代码中看不到它这样做的原因。有什么我想念的吗？

代码：

        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>

谢谢

这是更新的代码。在测试了教授 Abronsius 的方法后，它似乎导致页面无法加载。我错过了什么吗？<?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>

标签： javascriptphphtml

解决方案

免责声明：此代码段将显示一条错误消息，但代码在托管在自己的服务器上时可以正常工作！

使用相当新的剪贴板 API可以完成更简洁的数据复制方法 imo - 无需在屏幕外添加元素，添加新元素并照常删除它们。这也应该防止提到的滚动，因为这是focus在您最近添加的div元素上无意使用的副产品。

由于您的原始代码使用多个br标签来分隔显示的项目，因此（从样式和 DOM 操作/询问的角度来看）为每组结果使用公共父元素会更容易。您可以按如下方式重写循环逻辑：

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]
    );
}

然后渲染的内容可能如下所示，例如：

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>

更新：完整的测试页面以说明文本的副本

<!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>

推荐阅读