브라우저 자동 스크롤로 폼 요소 탭 이동

Question

브라우저가 뷰포트 아래쪽에있는 양식 필드로 이동하거나 (하단에 겹치는 텍스트 영역에 입력하는 경우) 일반적으로 브라우저는 자동으로 위로 스크롤하여 필드를 볼 수 있습니다 . 브라우저가 이동할 위치를 설정하는 방법이 있습니까?

페이지 하단에 고정 된 위치 표시 줄이 있기 때문에 브라우저에서 스크롤되어 더 위로 스크롤하려는 위치를 덮어 버리는 문제입니다.

건배

Answer 1

물론, 당신은 입력에 포커스 이벤트 핸들러를 추가하고 위치 onfocus 및을 확인할 수 있습니다. 그것이 바닥에 너무 가깝다면, 허용 될 때까지 창 스크롤을 조금만 부딪 치십시오. 다음은

당신이 jQuery를에 그것을 할 수있는 방법은 다음과 같습니다

// Constant amount of padding an element should be from the bottom of the window 
var padding = 50; 

// Add focus event to all your different form elements 
$("input, textarea, select").focus(function(){ 

    // Check their position relative to the window's scroll 
    var elementBottom = $(this).offset().top + $(this).height(); 
    var windowScroll = $(window).scrollTop(); 
    var windowBottom = windowScroll + $(window).height(); 

    if(elementBottom + padding > windowBottom){ 
     $(window).scrollTop(windowScroll + padding); 
    } 

}); 

당신은 그것을 in action here을 볼 수 있습니다.

편집 : 텍스트 영역에 입력하면

당신은 캡처하고 keydown event 처리기를 사용하여 입력하는 동안 텍스트 영역의 위치를 ​​확인할 수 있습니다

:

이

$('textarea').keydown(function(){ 
    // same logic as above to check textarea position relative to window 
});