JavaScript如何清除文档内所有焦点？能否强制触发blur操作？

好问题！确实没有原生的document.blur()方法，但我们可以通过几种可靠的方式强制让所有处于聚焦状态的元素失去焦点，刚好能满足你在用户按下F5刷新前处理焦点的需求。

方法一：创建隐藏的可聚焦元素转移焦点 #

页面同一时间只能有一个元素获得焦点，所以我们可以创建一个临时的、不可见的可聚焦元素，让它获取焦点，这样原来的聚焦元素就会自动失去焦点。这种方法兼容性极强，所有浏览器都支持：

function blurAllElements() {
  // 创建一个隐藏的input元素（input是天然可聚焦的）
  const hiddenInput = document.createElement('input');
  // 设置样式让它完全不可见且不干扰页面
  hiddenInput.style.position = 'absolute';
  hiddenInput.style.opacity = '0';
  hiddenInput.style.pointerEvents = 'none';
  hiddenInput.style.zIndex = '-9999';
  
  // 添加到文档中
  document.body.appendChild(hiddenInput);
  // 让这个隐藏元素获取焦点，转移当前焦点
  hiddenInput.focus();
  // 焦点转移完成后移除这个临时元素
  document.body.removeChild(hiddenInput);
}

方法二：直接让当前活跃元素失焦 #

利用document.activeElement可以获取当前页面中获得焦点的元素（如果存在的话），直接调用它的blur()方法即可：

function blurActiveElement() {
  const activeEl = document.activeElement;
  // 确保当前存在聚焦元素，且该元素支持blur方法
  if (activeEl && typeof activeEl.blur === 'function') {
    activeEl.blur();
  }
}

这种方法更直接，不需要创建临时元素，性能更优。不过要注意：同一时间页面上只会有一个元素处于聚焦状态，所以这个方法足够处理大部分场景。

在F5刷新前触发清除焦点 #

如果你想在用户按下F5时自动执行清除操作，可以监听键盘事件；或者监听beforeunload事件，覆盖所有刷新场景（包括点击浏览器刷新按钮、Ctrl+R等）：

监听F5键盘事件

document.addEventListener('keydown', (e) => {
  // F5的keyCode是116
  if (e.keyCode === 116) {
    // 执行清除焦点的方法，二选一即可
    blurAllElements();
    // blurActiveElement();
    // 不需要阻止默认行为，用户本来就是要刷新页面
  }
});

监听页面卸载前事件（覆盖所有刷新场景）

window.addEventListener('beforeunload', () => {
  blurAllElements();
  // 或者 blurActiveElement();
});

总结 #

• 如果需要确保绝对稳妥（比如遇到一些自定义组件模拟焦点的情况），优先选方法一；
• 如果追求简洁高效，方法二完全能满足常规需求。

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