当表单中存在隐藏的 required 输入框且其值为空时，浏览器默认会聚焦该输入框并阻止提交；本文介绍如何通过 javascript 拦截提交、校验值，并将焦点正确转移至可聚焦的自定义容器（如 div），实现无障碍友好的表单验证逻辑。
在 HTML 表单中，required 属性配合 hidden 会导致不可预期的行为：即使元素不可见，浏览器仍会在提交时强制聚焦该输入框（若为空），而用户无法感知或操作它——这不仅破坏用户体验，更违反 Web 可访问性（WCAG）原则。
根本解决方案是放弃对隐藏输入使用 required 属性，改用 JavaScript 进行主动校验与焦点控制。关键前提是：目标元素（如 .focusable）必须具备可聚焦能力，即需添加 tabindex="0"（使其进入标准 Tab 顺序）或 tabindex="-1"（仅支持 JS 聚焦，不参与键盘导航）。
以下为完整可运行示例：
<style>
.focusable {
padding: 12px;
border: 1px solid green;
margin: 10px;
border-radius: 3px;
}
.focusable:focus {
outline: 2px solid green;
outline-offset: 2px;
}
button {
margin: 10px;
padding: 12px;
border-radius: 3px;
border: 1px solid black;
cursor: pointer;
width: 150px;
}
form { text-align: center; }
</style>
<form onsubmit="return submitForm(event)">
<!-- 移除 required，改为 JS 校验；tabindex="-1" 防止意外被 tab 到 -->
<input type="hidden" id="computed-value" tabindex="-1" />
<!-- 添加 tabindex="0" 使 div 可聚焦且符合无障碍规范 -->
<div tabindex="0" class="focusable">
此区域将在隐藏字段为空时获得焦点
</div>
<button type="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 || hiddenInput.value.trim() === '') {
// 确保元素可接收焦点（尤其在动态渲染场景下）
if (focusableDiv.tabIndex === -1) {
focusableDiv.tabIndex = 0;
}
focusableDiv.focus();
// 可选：添加视觉/听觉反馈（如滚动到视口、播放提示音）
focusableDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
return false; // 阻止原生提交
}
// ✅ 值有效，执行实际提交逻辑（如 FormData 提交、AJAX 等）
console.log('表单数据有效，准备提交...');
// e.target.submit(); // 若需原生提交，取消注释此行（注意：会绕过本函数后续逻辑）
// 或使用 fetch / XMLHttpRequest 等异步方式
return true;
}
</script>⚠️ 注意事项：
- 永远不要给 hidden 元素设 required：它违背语义，且触发浏览器默认聚焦行为，导致焦点“消失”，损害可访问性。
-
tabindex 是焦点前提：默认不可聚焦，必须显式设置 tabindex="0"（推荐）或 tabindex="-1"（仅脚本聚焦）。
- 聚焦后建议滚动定位：使用 scrollIntoView() 确保焦点元素出现在可视区域，提升移动端及屏幕阅读器体验。
- 校验应覆盖空格与空白符：使用 .trim() 避免用户只输入空格导致逻辑误判。
- 无障碍增强：可为 .focusable 添加 role="region" 和 aria-label，向辅助技术明确其作用（例如
）。通过该方案，你既能保持表单逻辑完整性（隐藏字段由 JS 动态赋值），又能确保错误状态下的焦点可感知、可操作，真正实现健壮、合规、用户友好的前端表单交互。
