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

Blackbird – netter Ersatz für alert(); JavaScript Debugging ist meistens eine sehr dumme Angelegenheit, und hierbei rede ich jetzt nicht von "netten" Browsern, die console.log(); unterstütz...
AutoSuggest mit jQuery Das Auto-Completing bzw. Ajax-Angetriebene Suchen werden ja im Internet immer beliebter, allerdings haben die Teile bei falscher Programmierung die An...
jQuery Fundamentals – kostenloses jQuery eBook Ein angekündigtes kostenloses jQuery eBook könnte durchaus sinnvoll sein – auch wenn es auf Englisch ist (um dem einen oder anderen Kommentar hier dir...
Einfach mal eine Ansi-Grafik auf die Homepage pack... Früher, als alles noch besser war, und ich mich in Mailboxen herumgetrieben habe, gabs immer coole Ansi-Intros. Am Anfang waren es nur einfache Schrif...

Schreibe einen Kommentar

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