Как сфокусироваться на вводе с верхним краем

Question

Я делаю проверку формы, и когда пользователь не заполняет одно из обязательных полей, я хочу, чтобы позиция страницы фокусировалась на этом входе, но я не хочу, чтобы поле ввода было напрямую в верхней части рамки браузера, я хочу оставить некоторое пространство между ними, чтобы можно было увидеть название формы ввода.

Вот как это выглядит с focus() только

, но я хочу это так:

Идея заключается в том, чтобы вводить курсор сосредоточены на поле ввода.

EDIT: Если можно использовать анимированный фокус, который был бы потрясающим. Есть ли предложения, как это сделать?

Answer 1

Один из способов использования jQuery: прокрутите окно до вертикального смещения метки.

$(function(){ 
    $(window).scrollTop($("label").offset().top); 
    $("input").focus(); 
}); 

Или перейдите к входному элементу с некоторым дополнительным запасом:

$(function(){ 
    $(window).scrollTop($("input").offset().top - 100); 
    $("input").focus(); 
}); 

(Примечание: вместо «вход» и «метки» с соответствующим селектором)

Answer 2

Ну позволяет сделать предположение о том, что вы хотите убедиться, что метка ярлыка тоже видна ...

$.fn.smoothFocus = function(offset) { 
    //Find the label first: 
    var $labels = $(this).parent().filter("label"); 

    if ($(this).attr('id')) 
     //Find labels that have a for= attributes. 
     $labels.add("label[for=" + $(this).attr("id") +"]"); 

    //Find the top most label: 
    var top = $(this).offset().top; 
    $labels.each(function() { 
     var currentTop = $(this).offset().top; 
     if (currentTop < top) 
      top = currentTop; 
    }); 

    $(window).scrollTop(top - offset); 
    $(this).focus(); 
}; 

$(".myfield").smoothFocus(10); //Sets focus to be 10px above to respective label. 

Таким образом, вы может иметь довольно надежный способ правильной фокусировки. Я не тестировал его.