当表单中存在隐藏的 `required` 输入框且其值为空时，浏览器默认会聚焦该输入框并阻止提交；本文介绍如何移除 `required` 属性，改用 javascript 拦截提交、校验隐藏字段，并在验证失败时将焦点正确转移到带 `tabindex` 的自定义元素（如 div）上。
在标准 HTML 表单验证机制中，<input required hidden> 会引发矛盾行为：required 属性强制非空校验，但 hidden 属性使其不可聚焦，导致验证失败时浏览器无法自然聚焦该元素，可能抛出异常或表现不一致（尤其在 Safari 或旧版 Edge 中）。正确解法是放弃原生 required 约束，转为程序化控制验证与焦点逻辑。
✅ 关键实现要点
-
移除 required 和 hidden 属性（或仅保留 hidden，但必须取消 required）
原生 required 与 hidden 组合不可靠，应由 JS 全权接管校验。 -
为自定义聚焦目标添加 tabindex="0"
<div class="focusable" tabindex="0"> 是可聚焦的前提——否则 .focus() 调用无效。 -
拦截表单提交，手动校验并控制焦点
使用 event.preventDefault() 阻止默认提交，检查隐藏字段值，按需聚焦。
? 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
.focusable {
padding: 12px;
border: 1px solid green;
margin: 10px;
border-radius: 3px;
}
.focusable:focus {
outline: 2px solid green;
}
button {
margin: 10px;
padding: 12px;
border-radius: 3px;
border: 1px solid black;
cursor: pointer;
width: 150px;
}
form { text-align: center; }
</style>
</head>
<body>
<form onsubmit="submitForm(event)">
<!-- 移除 required，保留 hidden（或改为 class 控制显示） -->
<input id="hiddenInput" type="hidden" />
<div id="focusTarget" 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 = document.getElementById('hiddenInput');
const focusTarget = document.getElementById('focusTarget');
// 校验逻辑：若隐藏字段为空（或未设置），聚焦自定义元素
if (!hiddenInput.value?.trim()) {
focusTarget.focus();
// 可选：添加视觉反馈（如滚动到视图、高亮边框）
focusTarget.scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
}
// ✅ 校验通过：执行真实提交（如 AJAX 或表单 submit()）
console.log('Form valid, submitting...');
// e.target.submit(); // 若需原生提交（注意：会再次触发 onsubmit，需防循环）
// 或使用 fetch() 提交数据...
}
</script>
</body>
</html>⚠️ 注意事项
- tabindex="-1" vs "0"：tabindex="-1" 仅支持 .focus() 编程聚焦，但无法通过键盘 Tab 导航到达；若需键盘可访问性（a11y），务必使用 tabindex="0"。
- 无障碍支持：为 <div> 添加 role="region" 和 aria-label（如 aria-label="Form validation feedback"）可提升屏幕阅读器体验。
- 隐藏字段管理：建议用 type="hidden" 替代 hidden 属性，语义更清晰；其值应由 JS 在用户交互后可靠更新（如监听下拉选择、复选框等）。
- 错误提示增强：可在聚焦 div 后动态插入 <p aria-live="polite">Please complete the required information.</p>，实现无障碍错误播报。
通过以上方式，你完全掌控了验证时机与焦点流向，既规避了原生约束的局限性，又保障了可访问性与用户体验的一致性。
