05.082015

Pfeiltasten Navigation mit Javascript

Um eine gute Navigation zu bauen kann es durch aus sinnvoll sein, sie per Tastatur steuerbar zu machen. So könnte man zwischen den einzelnen Seiten mittels Pfeiltasten hin und her wechseln zum Beispiel bei einem Blog. Ich zeige euch wie ihr das ganze umsetzen könnt.

In JavaScript wird uns das Event onkeydown angeboten. Mit Hilfe dieses Events ist es uns möglich zu ermitteln, um welche gedrückte Taste es sich handelt. Jede gedrückte Taste übermittelt einen Code, den wir an dieser Stelle ganz einfach überprüfen und so ermitteln können, um welche Taste es sich handelt.

document.onkeydown = function(evt) {
 evt = evt || window.event;
 switch (evt.keyCode) {
   case 37:
     links();
     break;
   case 39:
     rechts();
     break;
   }
};

function links() {
 alert("Links");
}

function rechts() {
 alert("Rechts");
}

Die 37 steht hierbei für links und die 39 für rechts. Je nachdem, welcher Code übergeben wird, wird über das switch eine entsprechende Funktion aufgerufen. Über diese kann dann das eigentliche Navigieren aufgerufen werden. Zur Sicherheit ist an dieser Stelle noch die Abfrage auf das window Event eingefügt, falls das onkeydown keinen Code übergeben sollte, das window Event aber schon.