En klassisk mangel i browser-baserede applikationer er fornuftige tastatur-genveje. Dette skyldes til dels at alt hvad W3C’s “DOM Level 2″ specifikation (fra 2000, men stadig den nyeste der overhovedet nævner events) har at sige om emnet er:

The DOM Level 2 Event specification does not provide a key event module. An event module designed for use with keyboard input devices will be included in a later version of the DOM specification.

Som følge heraf håndteres keyboard events vidt forskelligt i forskellige browsere, med kaos til følge for den der måtte ønske at anvende dem.

Keyboard.js er mit bidrag til at forsøge at bringe orden i dét kaos, og gøre det lettere at implementere tastatur-genveje i browser-baserede applikationer. Keyboard.js er én Javascript-fil på 23 KB (12,6 KB minified). Den definerer to globale objekter, “KEY” og “Keyboard”, som kan bruges til at definere tastatur-genveje. Keyboard.js er lavet specielt til danske tastaturer og er testet i Internet Explorer 7, Firefox 2, Firefox 3 og Safari 3 på Windows, og i Safari 3 på Mac. Keyboard.js kræver enten Prototype eller jQuery.

Anvendelse

Definér en global tastatur-genvej:

Keyboard.registerGlobal(KEY.CTRL + KEY.F, mySpecialFindFunction);

Definér en lokal tastatur-genvej, som kun har effekt når fokus er indenfor et givet element. ‘myDiv’ kan her være et DOM objekt eller et id. Bemærk at det pågældende element automatisk bliver gjort fokusérbart (i Safari er det dog kun input-elementer der kan tage fokus):

Keyboard.register('myDiv', KEY.CTRL + KEY.SHIFT + KEY.ESC, myFingerBreaker);

Hvis der skal defineres flere tastatur-genveje på samme objekt kan det betale sig at anvende en “handler”:

var handler = Keyboard.handlerFor('myMenu');
handler.register(KEY.LEFT,  goLeft);
handler.register(KEY.RIGHT, goRight);
handler.register(KEY.UP,    goUp);
handler.register(KEY.DOWN,  goDown);

Keyboard.js indeholder to kontroller af de registreringer man foretager. For det første får man besked hvis man kommer til at binde den samme tast to gange på samme element. For det andet får man en advarsel hvis der er kendte problemer med den tast man binder. F.eks.:

Keyboard.registerGlobal(KEY.CTRL + KEY.ZERO, myZeroFunction);
//=> "Ctrl+0 is unmappable in Win-IE7, Win-Safari3 (reset zoom)"

Hvis man ønsker at binde en tast trods advarslen skal man tilføje en ekstra parameter ‘true’:

Keyboard.registerGlobal(KEY.CTRL + KEY.ZERO, myZeroFunction, true);

Endelig er det muligt eksplicit at angive kontekst for event handleren (dvs. værdien af “this” når funktionen kaldes). Som standard er kontekst det element som tasten er bundet til, men en anden kontekst kan defineres ved at angive et array i stedet for en funktion:

Keyboard.registerGlobal(KEY.F4, [myContext, myDropDownHandler]);

Yderligere detaljer

For KEY-navne og yderligere detaljer, se toppen af Keyboard.js.

Test-side

Jeg har lavet en simpel test-side som indeholder alle taster understøttet af Keyboard.js, samt de grundlæggende taste-kombinationer. Se siden her.

Download

• keyboard.js (23 KB)
• keyboard-min.js (12,6 KB, komprimeret med JSMin)

Licens

Keyboard.js frigives under LGPL licensen.