HTML5驗證和自定義自動對焦位置

Question

我正在使用簡單的HTML5驗證構建Web表單。

<input type="text" required />

默認情況下，當我單擊“提交”按鈕時，將啟動HTML5驗證瀏覽器，滾動頁面並集中在空白的必填字段上。 問題在於瀏覽器將向上滾動以將字段放置在屏幕頂部的視口中。 在某些情況下，我可能在頂部放置了絕對定位的元素，該元素將與該字段重疊。

我想知道是否可以滾動，比方說，當驗證開始時，甚至可以將文件移動到屏幕中間，再滾動100像素。

請注意，我在尋找適用於默認HTML5驗證的簡單JS或CSS解決方案。 我知道，如果我實現自定義驗證腳本，則可以實現這一目標，但我想保持精簡。

謝謝

Answer 1

您可以使用checkValidity()觸發自己的驗證，如果返回false，則向下滾動100px（因為checkValidity()您推到該元素）。

如果將表單設置為“ novalidate”，並且比onsubmit檢查表單，則可以更好地控制它。