当表单中存在隐藏的 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()。
以下是完整可运行示例：
<form onsubmit="submitForm(event)">
<input type="hidden" id="computed-value" tabindex="-1" />
<div tabindex="0" class="focusable">
This div should focus when form is submitted and hidden input is empty
</div>
<button type="submit">Submit</button>
</form>
<script>
function submitForm(e) {
e.preventDefault();
const hiddenInput = e.target.querySelector('input[type="hidden"]');
const focusableDiv = e.target.querySelector('.focusable');
if (!hiddenInput.value?.trim()) {
focusableDiv.focus();
// 可选：添加视觉反馈（如滚动到视口、高亮）
focusableDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
}
// 值有效 → 执行实际提交逻辑（如 FormData 提交、AJAX 等）
console.log('Form valid, submitting:', hiddenInput.value);
// e.target.submit(); // 若需原生提交，取消注释此行（注意：会绕过本函数后续逻辑）
}
</script>⚠️ 注意事项：
-
无障碍兼容性：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 + 清晰的校验分支，既能满足功能需求，又能保障可访问性与用户体验的一致性。
