当表单中存在隐藏的 `required` 输入框且其值为空时，浏览器默认会聚焦该输入框并阻止提交；本文介绍如何移除 `required` 属性，改用 javascript 拦截提交、校验隐藏字段，并在验证失败时将焦点正确转移到带 `tabindex` 的自定义元素（如 div）上。
在标准 HTML 表单验证机制中， 会引发矛盾行为：required 属性强制非空校验，但 hidden 属性使其不可聚焦，导致验证失败时浏览器无法自然聚焦该元素，可能抛出异常或表现不一致（尤其在 Safari 或旧版 Edge 中）。正确解法是放弃原生 required 约束，转为程序化控制验证与焦点逻辑。
✅ 关键实现要点
-
移除 required 和 hidden 属性（或仅保留 hidden，但必须取消 required）
原生 required 与 hidden 组合不可靠，应由 JS 全权接管校验。 -
为自定义聚焦目标添加 tabindex="0"是可聚焦的前提——否则 .focus() 调用无效。
- 拦截表单提交，手动校验并控制焦点
使用 event.preventDefault() 阻止默认提交，检查隐藏字段值，按需聚焦。? 完整可运行示例
⚠️ 注意事项
- tabindex="-1" vs "0"：tabindex="-1" 仅支持 .focus() 编程聚焦，但无法通过键盘 Tab 导航到达；若需键盘可访问性（a11y），务必使用 tabindex="0"。
-
无障碍支持：为 添加 role="region" 和 aria-label（如 aria-label="Form validation feedback"）可提升屏幕阅读器体验。
- 隐藏字段管理：建议用 type="hidden" 替代 hidden 属性，语义更清晰；其值应由 JS 在用户交互后可靠更新（如监听下拉选择、复选框等）。
- 错误提示增强：可在聚焦 div 后动态插入
Please complete the required information.
，实现无障碍错误播报。通过以上方式，你完全掌控了验证时机与焦点流向，既规避了原生约束的局限性，又保障了可访问性与用户体验的一致性。
- 拦截表单提交，手动校验并控制焦点
