Focus sur l'élément de la liste sur la flèche vers le bas appuyez sur

Je suis entrain de créer un personnalisé de suggestion automatique-boîte, j'ai besoin de passer li articles sur la flèche vers le bas appuyez sur.

j'ai donc ajouté l'attribut tabindex à li il obtient le focus. mais le problème, c'est qu'il défilement de la div avec quelques aléatoire de la hauteur que l'li de div.

Focus sur l'élément de la liste sur la flèche vers le bas appuyez sur

après la flèche vers le bas:

Focus sur l'élément de la liste sur la flèche vers le bas appuyez sur

et après quelques flèche vers le bas de la touche:

Focus sur l'élément de la liste sur la flèche vers le bas appuyez sur

et après qu'il sort de l'écran tandis que la souris vers le bas se comportent parfaitement.

Ici j'ai fait une Démo JSFiddle
cliquez d'abord sur item1 puis appuyez sur la flèche vers le bas-il se comporter de la même.

source d'informationauteur Zaheer Ahmed | 2013-04-10

  1. 15

    D'élaborer sur mon commentaire

    Ensemble du conteneur scrollTop à index of focused li * li height.

    return false sur keydown pour empêcher le navigateur de défilement de survolés 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/

  2. 2

    Avez-vous essayé d'utiliser d'ancrage au lieu de tabindex? e.g 

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

    Dans mon expérience, certains navigateurs ne peuvent pas gérer le focus sur tabindex correctement

  3. 1

    J'ai eu un problème comme ça une fois et résolu en définissant le style CSS overflow de la div contenant de none ou hidden selon votre préférence.

  4. 0

    Ajouter un .scrollTop() pour s'assurer qu'il est soit centré ou à la façon dont vous voulez qu'il soit.