点击复制到剪贴板按钮后页面自动滚动到底部,代码未发现问题求排查
问题1 点击复制按钮页面自动滚动到底部排查
根因
- 原有
copy函数中,动态创建的aux元素被追加到body末尾,调用aux.focus()时,浏览器默认行为会将聚焦元素滚动到可视区域,即使后续立即删除该元素,滚动行为已经触发执行。 - 已废弃的
document.execCommand本身也存在兼容性和不可控行为的问题。
修复方案(兼容原有逻辑的快速修复)
修改copy函数,给动态创建的元素添加脱离可视区域的定位属性,避免触发滚动:
function copy(element_id) { var aux = document.createElement("div"); // 新增定位代码,把元素移到视口外 aux.style.position = 'absolute'; aux.style.left = '-9999px'; aux.style.top = '-9999px'; 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); }
问题2 调整代码后页面无法正常加载排查
根因
- PHP语法致命错误:你已经处于PHP解析上下文(之前已经开启了
<?php标签),代码中又嵌套了<?php }标签,导致PHP解析器直接报错,页面无法渲染。 - 逻辑括号不匹配:
if ($numresults>0)的闭合逻辑混乱,多出来一个额外的},语法校验不通过。 - JS选择器不匹配:JS代码中使用
div.usr button选择复制按钮,但你提供的HTML结构中没有class="usr"的父级div,导致选择不到元素,复制功能不会触发。
修复方案
- 删除多余的
<?php标签,修正PHP括号匹配:
$LDAPFieldsToFind=array("homedirectory", "displayname", "samaccountname"); $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>"; // 原有循环输出内容放在这里 echo "</div>"; }else{ echo "</div><div><br><a class=clear href=javascript:history.go(-1)>Search again</a></div>"; } ldap_close($cnx); ?>
- 修正JS选择器,或者给按钮的父级div加上
class="usr"属性,确保能选中目标元素。
内容的提问来源于stack exchange,提问作者KCode
相关产品推荐
相关产品推荐

