javascript - 如何聚焦多个文本框并滚动到它

Question

我的表单中有很多文本框，在提交时会添加一个类然后该类获取 :first 选择器以及 .focus() 来聚焦于未接收任何输入的文本框，但它会 chop 文本框上方的消息.

那么如何将滚动条与文本框上的 .focus() 一起移动呢？

Answer 1

这样的东西就是你所追求的，对吗？

$(function() {

    $('input, textarea').each(function() {
        var os = $(this).offset().top;
        $(this).bind('focus', function() {
            $('html,body').animate({scrollTop: os}, 300);
        });
    });

});

当您将焦点集中在输入区域或文本区域时，它会滚动到该区域。

这是一个实际的 fiddle :http://jsfiddle.net/fExhw/

编辑

$(function() {
    $('#submit').click(function(e) {
        e.preventDefault();
        $('input').each(function() {
            if($(this).hasClass('error')) {
                var firstError = $('.error:first');
                $('html,body').animate({scrollTop: firstError.offset().top}, 300);
                firstError.focus();   
            } 
        });
    });
});

http://jsfiddle.net/fExhw/1/ (点击底部的提交按钮)

好的，已将其更新为我认为您想要的内容。