当表单中存在隐藏的 required 输入框且其值为空时，浏览器默认会聚焦该输入框并阻止提交；本文介绍通过移除 required 属性、添加 tabindex 并用 javascript 拦截提交事件，实现自动将焦点切换到指定 div 的完整方案。
在标准 HTML 表单验证中，required 属性会强制浏览器在提交前检查对应 是否有值；若为空，浏览器不仅阻止提交，还会自动将焦点设在该输入框上——即使它被设为 hidden（或 display: none），这一行为仍会发生，且可能引发不可见的聚焦问题或无障碍访问障碍。
因此，不能依赖 required + hidden 组合来实现条件校验逻辑。正确做法是：
✅ 移除 required 属性，改用 JavaScript 主动控制校验与聚焦流程；
✅ 为希望接收焦点的自定义元素（如
）添加 tabindex="0"，使其成为可聚焦的“键盘可访问元素”；
✅ 为隐藏输入框设置 tabindex="-1"（可选，避免意外被 Tab 键聚焦）；
✅ 在表单 submit 事件中拦截默认行为，手动校验值，并按需调用 .focus()。
✅ 为隐藏输入框设置 tabindex="-1"（可选，避免意外被 Tab 键聚焦）；
✅ 在表单 submit 事件中拦截默认行为，手动校验值，并按需调用 .focus()。
以下是完整可运行示例：
⚠️ 注意事项：
-
无障碍兼容性：tabindex="0" 是使 支持键盘聚焦和屏幕阅读器识别的关键；务必配合语义化 ARIA 属性（如 role="group" 或 aria-label）进一步提升可访问性；
- 样式补充：.focusable:focus 样式已提供基础轮廓，建议在生产环境使用更明确的焦点指示器（如 outline: 2px solid #3b99fc; outline-offset: 2px）；
- 防重复提交：可在 submitForm 中添加按钮禁用逻辑（如 e.target.querySelector('button').disabled = true），避免用户多次点击；
- 隐藏字段管理：确保 JavaScript 在其他逻辑中正确更新 hiddenInput.value（例如监听外部操作后赋值），否则校验将始终失败。
总结：表单交互控制权应回归 JavaScript，而非依赖受限的原生 required 行为。通过显式聚焦 + 语义化 tabindex + 清晰的校验分支，既能满足功能需求，又能保障可访问性与用户体验的一致性。
