web-dev-qa-db-fra.com

Se concentrer sur l'élément de la liste en appuyant sur la flèche du bas

Je suis en train de créer une boîte à suggestions automatique personnalisée dont je dois passer aux éléments li lorsque vous appuyez sur la flèche.

donc j'ai ajouté l'attribut tabindex à li, c'est obtenir le focus. mais le problème est que cela fait défiler la div avec une hauteur aléatoire qui le sépare de li sélectionné.

enter image description here

après la flèche vers le bas:

enter image description here

et après avoir appuyé sur la touche flèche bas:

enter image description here

et après cela, l'écran s'éteint et la souris se comporte parfaitement.

Ici, j’ai fait un Démo JSFiddle Cliquez d’abord sur item1, puis appuyez sur la flèche vers le bas, il se comporte de la même manière.

javascriptjqueryfocushtml-lists
14
Zaheer Ahmed

Expliquer mon commentaire

Définissez la variable scrollTop du conteneur sur index of focused li * li height.

return false on keydown pour empêcher le défilement normal du parent débordé dans le navigateur.

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

16
David Fregoli

Avez-vous essayé d'utiliser anchor au lieu de tabindex? par exemple 

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

D'après mon expérience, certains navigateurs ne peuvent pas gérer correctement le focus sur tabindex

2
CevenNome

J'ai eu un problème comme celui-ci une fois et je l'ai résolu en définissant le style CSS overflow de la div contenant sur none ou hidden en fonction de vos préférences.

1
Xanaxiel

Ajoutez un .scrollTop() pour vous assurer qu’il est soit centré, soit comme vous le souhaitez.

0
Mihai Stancu