如何专注于多个文本框并滚动到它

Question

我在表单中有很多文本框，在提交时会添加一个类 然后该类获得一个:first选择器和.focus()，以便专注于没有收到任何输入的文本框，但它会切断文本框上方的消息。

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

Answer 1

这样的事情是你追求的吗？

$(function() {

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

});

当您对输入或文本区域进行聚焦时，它将滚动到它。

这里有一个小提琴：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/（点击底部的提交按钮）

好的更新到我认为你想要的东西。

Answer 2

在文本框的focus eventhandler中，获取文本框的coords并使用jquery scrollLeft/scrollTop相应地滚动页面。

示例（起点，可能需要改进）：

function scrollToTextbox(id) {
  var coords = $('#' + id).offset();
  $(document).scrollLeft(coords.left);
  $(document).scrollTop(coords.top);
}

注意：可能必须根据页面中标记和样式的使用方式稍微调整滚动（通过添加几个像素或减去）。

Answer 3

您使用过jQuery.scrollTo吗？我很幸运能解决类似的任务。