페이지 하단에서 상단으로 탭 이동할 때 탐색 모음에서 포커스가 손실됩니다.

Question

인트라넷 사이트의 경우 브라우저 상단의 고정 위치에있는 bootstrap nav bar을 사용하고 있습니다. 이 특정 페이지에서 두 열의 입력 필드를 가로로 탭하여 탭을 사용하려고합니다.

크롬

크롬 그러나 다음의 선두에 하나 개의 컬럼의 하단에서 사용자 탭 브라우저 따라서, 맨 스크롤바를 이동시킴으로써 사용자별로 제공 때 사용자가 현재 포커스가있는 필드를 확인합니다. 여기에 스크린 샷이 표시되어 나는 무엇을 의미하는지 :

인터넷 익스플로러 그러나 IE에서

(버전 8, 9, & 10) 입력 필드의 매우 상단으로 이동 브라우저와는 너무 같은 탐색 모음 뒤에 분실 :

가 문법적을 조정하는 방법이 있나요 포커스가 두 번째 열의 맨 위 입력 필드에 설정되면 IE 스크롤 막대의 위치?

Answer 1

이 문제를 일으키는 각 입력에 first-input 클래스를 적용하면이 JS/jQuery 코드가 도움이 될 수 있습니다.

$(window).keyup(function(event) {    // Catch all keyboard events 
    if (event.keyCode == 9) {     // We only care about the TAB Key 
    var $activeEl = $(document.activeElement); // Get the currently focused element 
    if ($activeEl.hasClass('first-input')) { // If the element is a first-input... 
     console.log("We hit a first-input, adjust scroll."); 
     $(window).scrollTop($(window).scrollTop() - 50);  // Adjust scroll 
    }              // You can increase the number 
    } 
}); 

는 아마 최초의 입력 (하드 코딩 된 클래스 이름을 사용하는 외에)인지 확인하는 방법이 -하지만 그 마음에 와서 가장 빠른 일이었다.