상단 여백을 사용하여 입력에 초점 맞추는 방법

Question

양식 유효성 검사를하고 있는데 사용자가 필수 입력란 중 하나를 채우지 않을 때 해당 입력에 초점을두고 페이지 위치를 원하지만 직접 입력 필드를 원하지 않습니다. 브라우저 프레임의 맨 위에는 입력 폼의 제목도 볼 수 있도록 간격을두고 싶습니다.

이것은 focus() 만

으로 모습입니다하지만 난 이런 식으로 원하는 :

아이디어는 입력 필드에 초점을 맞추고 커서를 입력 유지하는 것입니다.

편집 : 환상적인 애니메이션 초점을 사용할 수 있다면 가능합니다. 그 일을하는 방법에 대한 제안이 있습니까?

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. 

이렇게하면 초점을 제대로 잡을 수있는 확실한 방법이 있습니다. 나는 그것을 시험하지 않았다.