如何取消当前元素焦点？执行blur后如何让Tab焦点跳转至前一元素？

直接使用blur()会导致焦点丢失，浏览器后续的Tab行为会基于默认焦点链逻辑出现不符合预期的跳转。想要直接将焦点定位到前一个可聚焦元素，可以通过以下步骤实现：

1. 获取当前活跃元素：先确认当前有获取焦点的元素，避免空值报错。
2. 筛选页面中所有可聚焦元素：包含默认可聚焦的表单控件、链接，以及设置了有效tabindex的元素。
3. 定位当前元素在可聚焦列表中的位置：找到索引后，直接将焦点设置到前一个元素。

代码实现（TypeScript） #

const currentElement = document.activeElement as HTMLElement;
if (!currentElement) return;

// 筛选所有可聚焦元素，可根据页面实际情况调整选择器
const focusableElements = Array.from(
  document.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  ) as NodeListOf<HTMLElement>
);

const currentIndex = focusableElements.indexOf(currentElement);

// 跳转到前一个元素，若当前是第一个则可选跳转到最后一个
if (currentIndex > 0) {
  focusableElements[currentIndex - 1].focus();
} else {
  focusableElements.at(-1)?.focus();
}

关键说明 #

• 不再使用blur()：直接将焦点设置到目标元素，避免焦点丢失后的异常Tab行为。
• 可自定义可聚焦元素选择器：如果页面中有自定义的可交互元素（如带contenteditable的元素），可以将其加入选择器中。
• 边界处理：当当前元素是第一个可聚焦元素时，可根据需求选择跳转到最后一个元素，或者保持当前焦点（移除else分支即可）。

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