Javascript Girl
  1. Javascript Girl
  3. Focus sur l'élément de liste sur la flèche vers le bas appuyez sur
Intereting Posts
Comment puis-je sécher mes vues CouchDB? HTML 5 Format de la monnaie Analyse des espaces de noms XML? Enregistrement des données de la synchronie chrome via javascript api Créer et modifier le fichier xml à l'aide de javascript La pression de touche initKeyEvent ne fonctionne que dans FireFox. Besoin d'une solution de navigateur croisé! Pourquoi JavaScript dit qu'un nombre n'est pas un nombre? Retourner JSON ne fonctionne pas correctement Exportez plusieurs graphiques multiples vers plusieurs pages PDF Supprimez les zéros de fuite insignifiants d'un nombre? L'attribut de report ne fonctionne pas avec l'API Google Maps? Utilisation de jquery-ui autocomplete avec plusieurs champs de saisie Comment puis-je ajouter dynamiquement les données de mon tableau aux cellules du tableau? Tourner en direct () sur on () dans jQuery Comment afficher une valeur du tableau qui se rapporte à la valeur d'un autre tableau, javascript

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

Je crée une boîte de suggestion automatique personnalisée. Je dois déplacer des éléments li en appuyant vers la touche vers le bas.

Alors j'ai ajouté l'attribut tabindex à li, il obtient la mise au point. Mais le problème est qu'il défile le div vers le haut avec une certaine hauteur aléatoire que le li sélectionné de div.

Entrez la description de l'image ici

Après la touche flèche vers le bas:

Entrez la description de l'image ici

Et après une touche enfoncée, appuyez sur:

Entrez la description de l'image ici

Et après cela, il sort de l'écran alors que la souris descend se comporte parfaitement.

Ici, j'ai fait un Demo JSF , puis cliquez sur l' item1 , puis appuyez sur la flèche, il se comporte de la même manière.

Elaborer mon commentaire

Réglez le scrollTop du conteneur en index of focused li li height index of focused li * li height index of focused li .

return false sur la déviation pour éviter le défilement normal du navigateur du parent survolé. 

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

Avez-vous essayé d'utiliser l'ancre au lieu de Tabindex? par exemple 

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

Selon mon expérience, certains navigateurs ne peuvent pas gérer l'accent sur tabindex correctement

J'avais un problème comme celui-là une fois et je l'ai résolu en configurant le overflow de style CSS du div divisé sur none ou hidden selon vos préférences.

Ajoutez un .scrollTop() pour vous assurer qu'il soit centré ou comment vous le souhaitez.