JavaScript F-Tasten neu belegen

JavaScript bietet die Möglichkeit auf Tastatureingaben des Nutzers zu reagieren. Folgender Code wartet auf das Drücken einer Taste und gibt dann den mit der gedrückten Taste verknüpften keyCode in die Enwicklerkonsole aus.

window.addEventListener('keydown', function(event){
  console.log(event.keyCode);
});

Jeder Taste ist ein eindeutiger keyCode zugeordnet, um im JavaScript Code gezielt auf einzelne Tasten reagieren zu können. Theoretisch lässt sich auf jede Taste einer Tastatur reagieren, es gibt jedoch Ausnahmen zum Beispiel bei simulierten Tastaturen auf Touch-Screens.

Man könnte so auch eine neue Tastenbelegung für die Funktionstasten (F-Tasten: F1, F2, …) für eine Website umsetzen. Dazu muss man nur die keyCodes der entsprechenden Tasten kennen.

window.addEventListener('keydown', function(event){ 
  switch(event.keyCode) { 
    case 112: f1(); break; 
    case 113: f2(); break; 
    case 114: f3(); break; 
    case 115: f4(); break; 
    case 116: f5(); break; 
    case 117: f6(); break; 
    case 118: f7(); break; 
    case 119: f8(); break; 
    case 120: f9(); break; 
    case 121: f10(); break; 
    case 122: f11(); break; 
    case 123: f12(); break; 
  } 
  event.preventDefault(); 
}); 

function f1() { 
  // mein Code für die Taste F1 
}

Mit event.preventDefault im Beispiel wird das Standardverhalten des Browsers für alle Tasten abgeschaltet. Das ist auch nötig, da die F-1 Taste im Chrome Browser beispielsweise standardmäßig zu einer Hilfeseite navigiert. Grundsätzlich sollte man sich gut überlegen, wann eine Neubelegung wichtiger Tasten Sinn macht. Die F-5 Taste zu überschreiben, wäre in den meisten Fällen keine gute Idee, da viele Nutzer sie zum Neuladen des Browserinhalts nutzen.

Tastaturereignisse können auch auf bestimmte HTML-Elemente beschränkt werden. Soll die Taste F-5 beispielsweise nur dann neu belegt werden, wenn der Nutzer in ein Input-Feld schreibt, könnte das so aussehen:

<input type="text" id="mein-input" />

document.getElementById('mein-input').addEventListener('keydown', function(event){ 
  if (event.keyCode === 116) { 
    // F5 wurde gedrückt 
    this.value += ' F5'; 
    // Browser reload verhindern 
    event.preventDefault(); 
  } 
});

Hier wird das Standardverhalten für F-5 nur dann überschrieben, wenn der Fokus auf dem Input-Feld liegt.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project