2

単純な HTML5 検証を使用している Web フォームを作成しています。

<input type="text" required />

デフォルトでは、「SUBMIT」ボタンをクリックすると、ブラウザの HTML5 検証が開始され、ページがスクロールされ、空の必須フィールドにフォーカスされます。問題は、ブラウザが画面の一番上にあるビューポート内にフィールドを配置するのに十分なだけ上にスクロールすることです。場合によっては、フィールドにオーバーラップする絶対配置要素を上部に配置することがあります。

スクロールが可能かどうか疑問に思います。たとえば、検証が開始されたときに 100 ピクセル以上スクロールしたり、フィールドを画面の中央に移動したりできます。

デフォルトの HTML5 検証で動作する単純な JS または CSS ソリューションを探していることに注意してください。カスタム検証スクリプトを実装すればこれを達成できることは承知していますが、無駄を省こうとしています。

ありがとう

4

1 に答える 1

2

を使用して自分で検証をトリガーできcheckValidity()ます。それが false を返した場合は、さらに 100 ピクセル下にスクロールします (checkValidity()既に要素に移動しているため)。

フォームを 'novalidate' に設定し、onsubmit よりもフォームをチェックすると、フォームをより適切に制御できます。

于 2013-09-17T18:41:25.953 に答える