3

検証エラーのある入力フィールドに焦点を当てた次のコードがあります。フォーカスされた位置にスクロールするアニメーションを追加したいと思います（したがって、[送信]をクリックすると、「最初の入力フィールドが検証に失敗した場所までスクロールします）。

何か案は？

 if(validation_failed == true) {
      $(selected_form).find(":input.validator_element_error:visible:enabled").first().focus();
            return false;
        }
4

1 に答える 1

7

フォーカスを適用する前に、scrollTopをアニメーション化できます。これはあなたの例から単純化されています。

$('html,body').animate({scrollTop: $('input').offset().top}, 200, function() {
    $('input').focus();
});

jsfiddle

あなたの特定のケースでは、エラーが発生した入力要素を希望どおりに選択してから$('input')、上記のコードで選択した要素に置き換えるだけでよいと思います。

var errorInput = $(selected_form).find(":input.validator_element_error:visible:enabled").first();
$('html,body').animate({scrollTop: errorInput.offset().top}, 200, function() {
    errorInput.focus();
});
于 2013-02-06T00:28:35.660 に答える