我正在构建 Web 表单，其中使用简单的 HTML5 验证。
<input type="text" required />
默认情况下，当我单击“提交”按钮时，浏览器 HTML5 验证将启动，滚动页面并将焦点放在空的必填字段上。问题是浏览器会向上滚动足以将字段放置在视口(viewport)内，位于屏幕的最顶部。在某些情况下，我可能在顶部有绝对定位的元素，与字段重叠。
我想知道是否可以滚动，假设验证启动时多滚动 100 像素，甚至将文件移动到屏幕中间。
请注意，我正在寻找适用于默认 HTML5 验证的简单 JS 或 CSS 解决方案。我知道如果我实现自定义验证脚本就可以实现这一目标，但我正在努力保持精简。
谢谢
最佳答案
您可以使用 checkValidity() 自行触发验证，如果返回 false，则再向下滚动 100px(因为 checkValidity() allready 会将您推送到该元素) .
如果您将表单设置为“novalidate”，并且比 onsubmit 检查表单，您可以更好地控制它。
关于javascript - HTML5 验证和自定义自动对焦位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18857368/