在列表第十行点开详情弹窗,关掉之后焦点跳回页面最上面,想接着看下一行要从头按十几个 Tab 才能回去。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
let back = document.activeElement
closeBtn.onclick=()=>{dlg.hidden=true;back && back.focus()}
打开弹窗时焦点被移走,关闭的时候又没有记录来源元素,浏览器只能把焦点扔回 body,原来的位置信息就丢掉了,用户得重新数一遍。这一点先确认清楚,后面就不用反复试。
碰到「弹窗关闭焦点归还」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
具体做法是,打开之前把当前获得焦点的元素存到一个变量里;关闭弹窗时调用 focus 方法回到刚才存下来的那个元素;那个元素已经不在页面上了,就退回列表容器上。
改完照着核一遍,反复开关五遍,每次关闭之后焦点都停在刚才那一行的按钮上。
