Bootstrap Modal关闭后如何将焦点返回至打开前最后聚焦元素

原生支持方案 #

Bootstrap Modal默认自带关闭后还原焦点到触发元素的能力，出现焦点丢失基本都是配置被改动导致的，优先检查以下配置：

• 初始化Modal时确认restoreFocus参数为默认值true，如果被手动设为false就会关闭焦点还原逻辑，初始化示例：

// 替换成你自己的弹窗ID
const modalInstance = new bootstrap.Modal(document.getElementById('demoModal'), {
  restoreFocus: true
})

• 检查触发逻辑：如果是用属性绑定触发，确认可聚焦的表格行上正确添加了data-bs-toggle="modal"和对应弹窗ID的data-bs-target属性；如果是用JS手动调用modalInstance.show()触发，要保证调用方法时，当前页面焦点就在你点击的表格行上，不要在触发前写了其他移走焦点的逻辑。

手动兼容方案 #

如果原生配置因为版本或者自定义逻辑冲突不生效，也不用自己存元素ID，Bootstrap的Modal事件体系本身就留了正确的获取时机：
你之前找不到正确的触发元素，是因为绑定错了事件——不要用Modal完全打开后触发的shown.bs.modal，要绑定打开动作刚开始触发的show.bs.modal事件，这个事件触发时原触发元素还没失去焦点，而且事件对象里直接带了触发元素的引用，不用自己提前存：

let triggerEl = null
const modalEl = document.getElementById('demoModal')

// Modal开始展示、原元素还未失焦时触发
modalEl.addEventListener('show.bs.modal', (e) => {
  // e.relatedTarget 就是直接触发弹窗的元素，也就是你点击的表格行
  // 兼容自定义触发场景，兜底拿当前聚焦元素
  triggerEl = e.relatedTarget || document.activeElement
})

// Modal完全关闭、动画结束后触发
modalEl.addEventListener('hidden.bs.modal', () => {
  triggerEl?.focus()
})

注意两个事件的拼写区别：带n后缀的shown/hidden是动作完成后触发，不带后缀的show/hide是动作刚开始时触发，不要搞混。

额外排查项 #

如果上述方案都不生效，检查你自定义的Modal回调逻辑里有没有手动调用window.scrollTo、或者给其他元素绑定了focus()调用，这类逻辑会打断默认焦点流程，直接导致页面跳回顶部。

内容的提问来源于stack exchange，提问作者alex