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

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...
Plugins für jQuery Ich sehe und übernehme einiges an Seiten und muss leider sagen, dass scheinbar bei Javascript-Programmierung vor Beginn der Arbeiten das Hirn einmal r...
PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
Mit Numeral.js Zahlen formatieren Normalerweise ist der Konstrukt ja wie folgt: MySQL->PHP->Form->PHP->MySQL - das ist ganz nett, bietet aber einige Fallstricke. Normalerwe...

Schreibe einen Kommentar