it-swarm.com.de

Konzentrieren Sie sich auf das Listenelement beim Abwärtspfeil

Ich erstelle ein benutzerdefiniertes Auto-Suggest-Feld, das ich bei li-Elementen nach unten bewegen muss.

also habe ich das tabindex-Attribut zu li hinzugefügt. Das Problem ist jedoch, dass das div mit einer zufälligen Höhe nach oben gescrollt wird, aus der das ausgewählte li aus div herauskommt.

enter image description here

nach dem Abwärtspfeil:

enter image description here

und nach ein paar Pfeiltasten:

enter image description here

und danach geht es aus dem Bildschirm heraus, während sich die Maus nach unten perfekt verhält.

Hier habe ich eine Demo JSFiddle .__ gemacht. Zuerst klicke auf item1 und drücke dann den Pfeil nach unten, um das gleiche Verhalten zu erzielen.

14
Zaheer Ahmed

Bearbeitung meines Kommentars

Setzen Sie die scrollTop des Containers auf index of focused li * li height.

return false nach dem Herunterfahren, um zu verhindern, dass das übergebliebene übergeordnete Element normal im Browser angezeigt wird.

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

Haben Sie versucht, Anker anstelle von Tabindex zu verwenden? z.B 

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

Meiner Erfahrung nach können einige Browser den Fokus auf tabindex nicht korrekt verarbeiten

2
CevenNome

Ich hatte ein Problem wie dieses einmal und löste es, indem ich den CSS-Stil overflow des enthaltenden div auf none oder hidden je nach Präferenz setzte.

1
Xanaxiel

Fügen Sie ein .scrollTop() hinzu, um sicherzustellen, dass es zentriert ist oder wie Sie es haben möchten.

0
Mihai Stancu