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

Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...
Kostenlose Bücher für JavaScript Die großen Verlage (zumindest die amerikanischen) hauen ja regelmäßig kostenlose eBooks raus, diese sind weder minderwertig, noch eingekürzt noch triv...
Cartoview – Mashups Made Simple Zu jeder besseren Web2.0-Anwendung gehört heutzutage eine Map, sei es nur um Daten zu visualisieren, aber auch zur Nutzung von Location Based Services...
d3.js – Visualisierung von Daten mit Javascr... Seit dem ganzen Hype um das Canvas-Element in HTML5 ist es scheinbar zu einem Volkssport geworden, Libraries für Javascript zu entwickeln, die entwede...

Schreibe einen Kommentar