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

JavaScript Events für Responsive Webdesign Responsive Webdesign ist nicht nur begrenzt auf geschicktes HTML & CSS sondern hat auch Auswirkungen auf JavaScript. Zum einen möchte man, dass be...
Lint für jQuery Früher war alles besser, der Himmel war blauer, die Wiesen grüner und ich programmierte eine Mailbox-Software in Turbo Pascal und wurde in der Uni daz...
Besserer Redirect mit jQuery Bei jQuery4U bin ich auf einen Artikel aufmerksam geworden, der in seiner Logik nicht zu überbieten ist! :) Jeder von uns benutzt wohl ab und an die l...
Paper.js – Vektorgrafiken in Javascript mitt... Es tauchen in letzter Zeit immer mehr Frameworks auf, die auf die eine oder andere Art und Weise versuchen, dem Webentwickler das Leben mit dem HTML5 ...

Schreibe einen Kommentar

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