template

Index :: Javascript :: Tastatur: Abfrage

Für manche Anwendungen ist es nötig, auf spezielle Tastatureingaben des Benutzers zu reagieren. Dies betrifft vor allem die Cursortasten, mit denen z.B. in Spielen eine Figur oder in Editoren eine Markierung bewegt werden.

Um im folgenden Beispiel alle Tastaturereignisse der Seite abfangen zu können, leiten wir das onKeydown-Event des <BODY>-Objekts auf eine eigene Routine (DoKeyDown), welche dann die Auswertung vornimmt.
Das Event liefert uns jedoch keinen ASCII-Code sondern eine Tastennummer (Keycode), d.h. man müsste sich den ASCII/ANSI-Code (unter Berücksichtigung der Zusatztasten Shift, Control und Alt) erst errechnen, falls man diesen benötigte. Für die Abfrage der Cursor- und anderen Steuerungstasten wie z.B. PgUp oder Entf ist die Tastennummer jedoch völlig ausreichend.

Demo: Die Tastaturereignisse dieser Seite werden angezeigt.
Abgefangen werden die Zusatztasten (Shift, Control und Alt), Buchstaben- und Zifferncodes, sowie diverse Steuerungstasten:
Zusatztasten
Keycode

Hier der verwendete Quellcode:
Javascript im Header

function DoKeyDown(e) {
  var s = "", ckey = e.keyCode? e.keyCode: e.which;
  if (e.shiftKey) s+=" Shift";
  if (e.ctrlKey) s+=" Ctrl";
  if (e.altKey) s+=" Alt"; tAdd.value = s;
  switch (ckey) {
    case 8: ShowKey("Backspace"); break;
    case 13: ShowKey("Return"); break;
    case 32: ShowKey("Blank"); break;
    case 33: ShowKey("PgUp"); break;
    case 34: ShowKey("PgDn"); break;
    case 35: ShowKey("Ende"); break;
    case 36: ShowKey("Pos1"); break;
    case 37: ShowKey("Cursor: nach links"); break;
    case 38: ShowKey("Cursor: nach oben"); break;
    case 39: ShowKey("Cursor: nach rechts"); break;
    case 40: ShowKey("Cursor: nach unten"); break;
    case 45: ShowKey("Einfg"); break;
    case 46: ShowKey("Entf"); break;
    default:
      if (ckey>47 && ckey<58) s = "Ziffer";
      else if (ckey>64 && ckey<91) s = "Buchstabe";
      else { ShowKey(""); break; }
      ShowKey(s+": "+String.fromCharCode(ckey));
  } return true;
}
function ShowKey(s) { tKey.value = s; }


Die Event-Umleitung im <BODY>-Tag:

<BODY onKeydown='return DoKeyDown(event)'>


Weiter unten, die Anzeigefelder:

<input id='tAdd' type='text' size='20' readonly><br>
<input id='tKey' type='text' size='20' readonly>


Javascript zur Initialisierung der Anzeigefelder:

<SCRIPT type='text/javascript'>
var tAdd = document.getElementById("tAdd");
var tKey = document.getElementById("tKey");
</SCRIPT>

Index :: Javascript

template