JavaScript 在模糊事件后将 Tab 键顺序返回到页面顶部

Question

我正在更新一个可以通过键盘访问的表单。表单底部有一个“下一页”按钮，可将用户导航到下一页。“下一步”按钮在导航期间不会重新呈现，只会更改表单内容。

当我单击后退按钮时，我运行一个 handleSubmit 函数：

<ButtonPrimary
  cypressTestId="sign-up-role-wizard-next-button"
  onClick={handleSubmit}
  text="NEXT"
/>

在其逻辑末尾附近运行handleSubmit一个函数：blur

    function handleSubmit() {
        const callback = ({ branch, rankType, role }) => {
            setRankType(rankType?.name);
            setUserInfo((prev) => ({
                ...prev,
                branchId: branch?.name,
                role: role?.name,
            }));
        };
        handleRoleWizardSubmit(callback);
        document.activeElement.blur();
    }

document.activeElement.blur()正在按预期工作，并在单击时从“下一步”按钮上移除焦点。但是，在下一个表单内容呈现后，单击选项卡会将焦点放在我的页脚上。焦点将转到页脚，因为“下一个”按钮是表单选项卡流中的最后一个元素。所以document.activeElement.blur()看起来它正在工作，因为聚焦环被移除，但选项卡顺序没有被重置。

Answer 1

不用使用blur，只需将tabindex表单的设为-1和focusit 即可。这是一个普通的 JS 示例，您可以在 React 中对其进行修改ref。

const form = document.querySelector('form');

document.querySelector('#next').addEventListener('click', (ev) => {
  // Instead of blurring:
  // ev.target.blur();
  
  // Focus the form:
  form.focus({preventScroll: true});
});

button,
form {
  border: 2px solid black;
  margin: 0.2rem;
  outline: none;
}

*:focus {
  border-color: red;
}

<form tabindex="-1">
  <button id="next" type="button">Next</button>
</form>
<footer>
  <button>Unrelated button</button>
</footer>