javascript - HTML5 验证和自定义自动对焦位置

Question

我正在构建使用简单 HTML5 验证的 Web 表单。

<input type="text" required />

默认情况下，当我单击“提交”按钮时，浏览器会启动 HTML5 验证，滚动页面并关注空的必填字段。问题是浏览器会向上滚动到足以将字段放置在视口内，在屏幕的最顶部。在某些情况下，我可能在顶部有与字段重叠的绝对定位元素。

我想知道是否可以滚动，比如说在验证开始时再滚动 100 像素，或者甚至将文件移动到屏幕中间。

请注意，我正在寻找适用于默认 HTML5 验证的简单 JS 或 CSS 解决方案。我知道如果我实现自定义验证脚本，我可以实现这一点，但我正在努力保持精简。

谢谢

Answer 1

您可以使用 自己触发验证checkValidity()，如果返回 false，再向下滚动 100 像素（因为已经checkValidity()将您推送到元素）。

如果您将表单设置为“novalidate”并且比 onsubmit 检查表单，您可以更好地控制它。