CODEWITHSUNDEEP
javascriptjqueryfocushtml-lists
Zaheer Ahmed
Zaheer Ahmed

Reputation: 28588

Focus on list item on down arrow press

I am creating a custom auto suggest-box I need to move on li items on arrow down press.

so I added tabindex attribute to li it is getting focus. but problem is that it scrolling the div up with some random height that it out the selected li from div.

enter image description here

after arrow down key:

enter image description here

and after some arrow-down key press:

enter image description here

and after that it goes out of screen while mouse down behave perfectly.

Here I made a Demo JSFiddle first click item1 and then press arrow down it behaving same.

Upvotes: 16

Views: 47317

Answers (4)

David Fregoli
David Fregoli

Reputation: 3407

Elaborating on my comment

Set the container's scrollTop to index of focused li * li height.

return false upon keydown to prevent normal browser scrolling of overflown parent.

$('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/

Upvotes: 16

CevenNome
CevenNome

Reputation: 69

Have you tried using anchor instead of tabindex? e.g 

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

In my experience some browsers cannot handle the focus on tabindex correctly

Upvotes: 2

Cy Pangilinan
Cy Pangilinan

Reputation: 572

I had a problem like that once and solved it by setting the CSS style overflow of the containing div to none or hidden depending on your preference.

Upvotes: 1

Mihai Stancu
Mihai Stancu

Reputation: 16127

Add a .scrollTop() to make sure it is either centered or how you want it to be.

Upvotes: 0

Related Questions