当表单中存在隐藏的 required 输入字段且其值为空时，浏览器默认会聚焦该输入框并阻止提交；本文介绍如何通过 javascript 拦截提交、移除 required 属性或改用程序化校验，并使指定的 div（需设置 tabindex）获得焦点，实现更灵活的表单控制逻辑。
在标准 HTML 表单验证中，required 属性会触发浏览器原生校验行为：一旦某个 required 输入为空，表单提交会被阻止，且焦点自动跳转至该字段——即使它被设为 hidden（注意：hidden 仅影响渲染，不绕过校验）。因此，不能依赖 required + hidden 组合来实现“隐藏但参与校验”的需求，而应转向 JavaScript 主导的验证与焦点管理。
✅ 正确做法：禁用原生 required，改用 JS 校验 + 显式聚焦
首先，移除 的 required 属性（避免原生拦截），为其添加 tabindex="-1" 以确保其可被脚本访问但不进入 Tab 顺序；同时，为 .focusable 元素添加 tabindex="0"，使其成为真正可聚焦的非表单控件：
<form onsubmit="submitForm(event)">
<input type="hidden" id="computed-input" 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>接着，编写校验逻辑：阻止默认提交行为 → 检查隐藏字段值 → 值为空则聚焦目标 div，否则继续提交（例如通过 form.submit() 或 AJAX）：
function submitForm(e) {
e.preventDefault();
const form = e.target;
const hInput = form.querySelector('input[type="hidden"]');
const focusable = form.querySelector('.focusable');
if (!hInput.value || hInput.value.trim() === '') {
focusable.focus();
// 可选：添加视觉反馈（如滚动到视图、高亮边框）
focusable.scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
}
// ✅ 值有效，执行实际提交
// 方式1：原生提交（解除 preventDefault 后可直接 submit，但此处已阻止，故显式调用）
// form.submit();
// 方式2：推荐 —— 使用 FormData + fetch 实现无刷新提交
const formData = new FormData(form);
fetch('/submit-endpoint', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(err => console.error('Error:', err));
}⚠️ 注意事项
- tabindex 是关键：div 默认不可聚焦，必须显式设置 tabindex="0"（使其按文档顺序可聚焦）或 tabindex="-1"（仅支持脚本调用 .focus()，不参与键盘导航）；本例推荐 "0" 以兼顾可访问性。
- 不要混用 required 和 hidden：这会导致不可预测的校验行为（如 Chrome 仍报错但不显示提示，Safari 可能忽略）。
- 空值判断要严谨：使用 !value 可能误判 '0'、'false' 等真字符串，建议结合 trim() 判断纯空白。
- 无障碍友好：聚焦后可配合 aria-live 区域播报错误信息，或为 .focusable 添加 aria-invalid="true" 和 aria-describedby 关联提示文案。
✅ 总结
要实现“隐藏字段为空时聚焦自定义元素”，核心在于放弃原生 required 语义，改由 JavaScript 全权控制校验流程与焦点调度。通过合理设置 tabindex、拦截 submit 事件、精准判断字段状态，并主动调用 .focus()，即可完全掌控用户体验，同时保持代码清晰、可维护且符合 Web 标准。
