Tập trung vào mục danh sách trên mũi tên xuống nhấn

Question

Tôi đang tạo hộp đề xuất tự động tùy chỉnh Tôi cần di chuyển trên li các mục trên mũi tên xuống nhấn.

vì vậy tôi đã thêm thuộc tính tabindex để li nó đang tập trung. nhưng vấn đề là nó di chuyển div lên với một số chiều cao ngẫu nhiên mà nó ra khỏi li được chọn từ div.

sau mũi tên xuống chìa khóa:

và sau một vài mũi tên xuống nhấn phím:

và sau đó nó đi ra khỏi màn hình trong khi chuột xuống hành xử hoàn hảo.

Ở đây tôi đã thực hiện một Demo JSFiddle , trước tiên hãy nhấp vào item1 và sau đó nhấn mũi tên xuống nó hoạt động giống nhau.

Answer 1

Xây dựng trên nhận xét của tôi

Set của container scrollTop-index of focused li * li height.

return false khi nhấn phím để ngăn việc cuộn trình duyệt thông thường của phụ huynh bị tràn.

$('div.container').on('focus', 'li', function() { 
    var $this = $(this); 
    $this.addClass('active').siblings().removeClass(); 
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight()); 
}).on('keydown', 'li', function(e) { 
    var $this = $(this); 
    if (e.keyCode === 40) {   
     $this.next().focus(); 
     return false; 
    } else if (e.keyCode === 38) {   
     $this.prev().focus(); 
     return false; 
    } 
}).find('li').first().focus(); 

jsfiddle http://jsfiddle.net/38zR3/42/

Answer 2

Thêm .scrollTop() để đảm bảo đó là trung tâm hoặc cách bạn muốn.

Answer 3

Tôi đã gặp sự cố như vậy một lần và giải quyết vấn đề này bằng cách đặt kiểu CSS overflow của div chứa thành none hoặc hidden tùy thuộc vào tùy chọn của bạn.

Answer 4

Bạn đã thử sử dụng neo thay vì tabindex chưa? ví dụ

<li><a href="#"></li> 

Theo kinh nghiệm của tôi một số trình duyệt không thể xử lý tập trung vào tabIndex đúng