将焦点放在按下箭头的列表项上 [英] Focus on list item on down arrow press

问题描述

我正在创建一个自定义自动提示框，我需要在 li 项目上向下移动。

<所以我添加tabindex属性李，它是越来越重点。但问题是它滚动div的一些随机高度，它从选定的李从div。

，然后按下一些箭头键： com / S6NWa.jpgalt =

之后，它在屏幕上出现，而鼠标按下时表现完美。

在这里我做了一个 Demo JSFiddle
，先点击 item1 ，然后按下箭头，表现相同。

/ strong>

设置容器的 scrollTop 为

$ c> * l我身高。

返回false 在keydown防止正常浏览器滚动飞越父母。
$ b $

  $（'div.container'）。on（'focus'，'li'，function（）{
 var $ this = $（this）; 
 $ this.addClass（'active'）。siblings（）。removeClass（）; 
 $ this.closest（'div.container'）。scrollTop（$ this.index（）* $ this.outerHeight（））; （'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/

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.

after arrow down key:

and after some arrow-down key press:

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.

解决方案

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/

这篇关于将焦点放在按下箭头的列表项上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！