当必填隐藏字段未填写时，让表单聚焦自定义元素

核心要点 #

要让div能被聚焦，首先得给它添加tabindex="0"（让它成为可聚焦元素，同时不打乱正常Tab导航顺序）；然后在表单提交时手动校验隐藏input的值，为空则阻止提交并让div获得焦点。

具体实现步骤 #

• 给目标div添加tabindex="0"，确保它可以接收焦点
• 监听表单的submit事件，在回调中完成以下操作：
  1. 获取隐藏input的当前值
  2. 如果值为空，调用event.preventDefault()阻止表单提交
  3. 调用目标div的.focus()方法使其获得焦点

完整代码示例 #

.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;
}

<form id="myForm">
  <input id="hiddenInput" required hidden />
  <div class="focusable" tabindex="0">
    提交表单时此div应获得焦点
  </div>
  <button type="submit">Submit</button>
</form>

const form = document.getElementById('myForm');
const hiddenInput = document.getElementById('hiddenInput');
const focusableDiv = document.querySelector('.focusable');

form.addEventListener('submit', (e) => {
  // 检查隐藏input的值是否为空
  if (!hiddenInput.value.trim()) {
    e.preventDefault(); // 阻止表单提交
    focusableDiv.focus(); // 让div获得焦点
  }
});

补充说明 #

• 若希望该div只能通过JS聚焦、无法通过Tab键导航到它，可将tabindex设为-1
• 因为隐藏input的原生验证提示不会被浏览器显示，所以手动校验是更直接的处理方式

内容的提问来源于stack exchange，提问作者Inaara Kalani