jwerty – JavaScript Keyboard Events vom Feinsten

Keyboard Events in Javascript sind in Backends das vielleicht am meisten unterschätze Feature! Wenn man mal ehrlich ist: man benutzt die Tastatur kaum und greift immer zur Maus – weil es über Jahre hin antrainiert worden ist. Es gibt aber durchaus sinnvolle Möglichkeiten die Tastatur mit einzubeziehen. Im Google Reader kann man zum Beispiel prima mit der Tastatur zwischen den Artikeln switchen, markieren und löschen. In Anbetracht dessen, das Backends immer komplexer werden ist hier auch anzuraten auf Keyboard-Events zu setzen. Letztere sind aber durchaus stiefmütterlich in Javascript behandelt. Man kann durchaus Tasten-Kombinationen mit Events belegen, den Keycode hat man aber gefälligst selbst zu ermitteln.

Screenshot der jwerty-Homepage

Das Problem ist bekannt, und Seiten wie der Key Event Tester helfen beim ermitteln der notwendigen Codes. Wesentlich sinnvoller ist an der Stelle allerdings jwerty, das im Prinzip eine Bibliothek aller möglichen Tastenkombinationen darstellt. Das ~3kb große Skript setzt hier auf die Tatsache, das es kompletter Schwachsinn ist keyCodes zu ermitteln. Stattdessen können Tastenkombinationen im Klartext erfasst werden. Insbesondere ist interessant das man keyCodes kombinieren kann, also den keyCode für einen PC und für einen Mac in einem ab-frühstücken kann. Wie sieht das aus?

// prevents 'ctrl+shift+p''s default action
jwerty.key('ctrl+shift+p', false);
 
// outputs "print!" to the console when pressed.
jwerty.key('ctrl+shift+p', function () { console.log('print!') });
 
// will prevent the shortcut from running, only when '#myInput' is in focus
jwerty.key('ctrl+shift+p', false, '#myInput');

Man sieht, das ist ganz einfach! ;) Zurück zu Mac / PC, es sind auch Konstrukte wie diese möglich:

‚ctrl+shift+p/cmd+shift+p, p‘

Hier wird auf dem PC das CTRL-SHIFT-P mit einem Event belegt, auf dem Mac das CMD-SHIFT-P und wenn man nur P drückt geht das auch! ;) Das Projekt kann man übrigens auch auf GitHub forken und alles in allem ist es eine der sinnvollsten Javascript-Micro-Libraries seit langem!

Ähnliche Beiträge

Photoshop mit Javascript Zu sagen man kennt Photoshop nicht wäre als wenn ein Eisverkäufer mit der Gabel die Waffeln füllt. Erstaunlicherweise ist es aber so, dass nicht ein B...
Vereinfachte Formularerstellung mit Patterns Von irgendeinem Punkt an funktionieren Webseiten alle gleich: Slider auf die Startseite, die Usability von Formularen erhöhen und das bloß mit minimal...
Microjs – Micro-Frameworks für Vanilla Javas... Im Bereich der Webentwicklung herrscht derzeit eine "Totschläger-Mentalität" - erster Schritt beim Aufsetzen einer neuen Seite, bzw. des grundlegenden...
melonJS – Spieleentwicklung in HTML5 Spieleentwicklung in HTML5 ist "the next big thing" - aber das ist nicht wirklich was Neues. Es geht inzwischen auch nicht mehr wirklich um das ob, so...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.