如何临时设置所有元素tabindex属性并恢复至原始值？

这个问题的核心其实很简单：你必须提前保存每个元素的原始tabindex值，不然直接覆盖之后，原来的数值就丢失了，根本没法凭空恢复。我给你整理了一个既能临时禁用Tab聚焦，又能完美恢复初始状态的方案，甚至还做了按钮切换的交互优化：

实现思路 #

1. 第一次点击按钮时，把每个可交互元素的原始tabindex值存储到一个自定义属性（比如data-original-tabindex）里，这样每个元素的原始值和自身绑定，不会搞混。
2. 同时将所有元素的tabindex设为-1，禁用Tab聚焦。
3. 再次点击按钮时，读取自定义属性里的原始值，将元素恢复到初始状态（包括那些原本没有显式设置tabindex的元素）。

完整代码示例 #

<!-- 你的原始HTML元素 -->
<a href="http://example.com" tabindex="3">Link</a> 
<input type="text" tabindex="2"> 
<select tabindex="5"> 
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
</select> 
<textarea tabindex="4">Hello world</textarea> 
<button tabindex="1" id="Btn">禁用Tab顺序</button>

<script>
const btn = document.getElementById("Btn");
let isTabDisabled = false; // 标记当前Tab状态

btn.addEventListener("click", function() {
  // 选中所有可交互元素
  const interactiveElements = document.querySelectorAll("a,area,button,input,object,select,textarea");
  
  if (!isTabDisabled) {
    // 第一步：保存原始值并禁用Tab
    interactiveElements.forEach(el => {
      // 获取原始tabindex，注意未显式设置的元素会返回null
      const originalTabIndex = el.getAttribute("tabindex");
      // 把原始值存到自定义属性里，null的话存空字符串
      el.setAttribute("data-original-tabindex", originalTabIndex ?? "");
      // 设置为-1禁用Tab聚焦
      el.setAttribute("tabindex", "-1");
    });
    isTabDisabled = true;
    btn.textContent = "恢复Tab顺序"; // 切换按钮文字，提升用户体验
  } else {
    // 第二步：恢复原始tabindex
    interactiveElements.forEach(el => {
      const originalTabIndex = el.getAttribute("data-original-tabindex");
      if (originalTabIndex === "") {
        // 原本没有设置tabindex，直接移除属性恢复默认行为
        el.removeAttribute("tabindex");
      } else {
        // 原本有设置，恢复原始值
        el.setAttribute("tabindex", originalTabIndex);
      }
      // 清理自定义属性，保持DOM整洁
      el.removeAttribute("data-original-tabindex");
    });
    isTabDisabled = false;
    btn.textContent = "禁用Tab顺序";
  }
});
</script>

关键细节说明 #

• 处理无显式tabindex的元素：有些元素可能没有手动设置tabindex，这时候getAttribute("tabindex")会返回null。我们存空字符串标记这种情况，恢复时直接移除tabindex属性，让元素回到默认的Tab顺序行为（默认tabindex为0，遵循DOM渲染顺序）。
• 状态切换逻辑：用isTabDisabled变量跟踪当前状态，让同一个按钮既能禁用又能恢复，不用额外加按钮，更简洁。
• DOM整洁性：恢复完成后移除自定义属性，避免留下无用的DOM属性。

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