当表单中存在隐藏的 required 输入框且其值为空时，浏览器默认会聚焦该输入框并阻止提交；本文介绍如何通过 javascript 拦截提交、校验值，并将焦点正确转移至可聚焦的自定义容器（如 div），实现无障碍友好的表单验证逻辑。
在 HTML 表单中，required 属性配合 hidden 会导致不可预期的行为：即使元素不可见，浏览器仍会在提交时强制聚焦该输入框（若为空），而用户无法感知或操作它——这不仅破坏用户体验，更违反 Web 可访问性（WCAG）原则。
根本解决方案是放弃对隐藏输入使用 required 属性，改用 JavaScript 进行主动校验与焦点控制。关键前提是：目标元素（如 .focusable）必须具备可聚焦能力，即需添加 tabindex="0"（使其进入标准 Tab 顺序）或 tabindex="-1"（仅支持 JS 聚焦，不参与键盘导航）。
以下为完整可运行示例：
⚠️ 注意事项：
- 永远不要给 hidden 元素设 required：它违背语义，且触发浏览器默认聚焦行为，导致焦点“消失”，损害可访问性。
-
tabindex 是焦点前提：默认不可聚焦，必须显式设置 tabindex="0"（推荐）或 tabindex="-1"（仅脚本聚焦）。
- 聚焦后建议滚动定位：使用 scrollIntoView() 确保焦点元素出现在可视区域，提升移动端及屏幕阅读器体验。
- 校验应覆盖空格与空白符：使用 .trim() 避免用户只输入空格导致逻辑误判。
- 无障碍增强：可为 .focusable 添加 role="region" 和 aria-label，向辅助技术明确其作用（例如
）。通过该方案，你既能保持表单逻辑完整性（隐藏字段由 JS 动态赋值），又能确保错误状态下的焦点可感知、可操作，真正实现健壮、合规、用户友好的前端表单交互。
