Keyboard event

Grundlæggende om tastaturet

For at forstå hvordan man arbejder med tastaturet, så er det vigtigt at vide hvordan man grundlæggende kommunikerer med det, for at forstå hvad det laver.

De forskellige events til keyboardet

Der er 3 forskellige events knyttet til keyboardet, som giver en del forskel i hvordan man arbejder med resultaterne.

onkeydown sker idet en tast bliver trykket ned.

onkeyup sker idet en tast bliver sluppet.

onkeypress kommer ligeledes når en tast bliver sluppet, men den kommer først efter tolkningen af tasten.

De grundlæggende tasters keyCodes på onkeydown og onkeyup

Alle de fysiske taster på tastaturet har tildelt en keyCode (hedder which i nogle browsere). Det er et tal for hver tast der er, og uanset hvor producenten har placeret tasten, så giver den samme talværdi.

Selvfølgelig er der ingen regler uden undtagelser – De to shift-taster giver samme tal, så man kan ikke umiddelbart skelne imellem dem. Der er også enkelte taster som Fn-tasten og SysReq der ikke umiddelbart kommer med en keyCode, og enkelte taster griber så grundlæggende ind i browseren at de er svære at anvende.

Det betyder at man på disse to events får samme værdi i keyCode uanset om Shift er holdt nede eller ej, altså giver det man forventer som a og A giver den samme værdi, men forskellen er at man har fået en keyCode for Shifttasten, så hvis man ønsker at skelne mellem store og små bogstaver, så skal man selv holde styr på om shift er trykket ned (det kan også læses i eventens shiftKey).

Det kan umiddelbart lyde bøvlet, men det giver en større frihed til at få koder fra alle taster, så man også kan styre noget med nogle af de taster der normalt har specielle funktioner, det kunne typisk være piletasterne man kunne ønske at anvende.

De fortolkede tasters keyCode på onkeypress

Hvis man ønsker at få forskellig værdi på a og A, så kan man anvende onkeypress eventen. Dens keyCode giver den ASCII værdi der normalt anvendes for de to bogstaver.

Det kan selvfølgelig give nogle fordele, da det letter tolkningen af outputtet fra keyboardet, men det betyder så at en del taster der ikke kommer med en event, f.x. piletasterne, backspace, delete og en del andre.

Eksempel der fanger alle keyboard input

Til andre anvendelser kan det være godt at fange alle indtastninger generelt. Det kunne være til at navigere noget rundt i browservinduet med piletasterne, eller blot at give dem en anderledes anvendelse.

Til dette skal man anvende enten onkeydown eller onkeyup, de tillader at piletasterne kommer igennem, så man kan fange dem og bruge dem.

For at fange alle keyboard-events i dokumentet (browservinduet), så skal man have hægtet sig på den ønskede eventhandler idet man loader dokumentet. Det gør man ved at skrive følgende et sted der afvikles når siden loades:

document.onkeydown = fangTast;

fangTast er den funktion der håndterer tasten - det er lidt specielt, at der ikke skal skrives fangTast().

Funktionen gør så det at den filterer piletasterne ud, og håndterer dem. Funktionen ser ud som følger:

function fangTast(e) {
// fanger keyboard events
	if (window.event) {
		e = window.event;
	}

	// Denne version laver den simple browser-test, for at finde taste-værdien.
	// Find  hvilken tast det er (browser-afhængigt)
	var key = 0;
	if (e.keyCode) key = e.keyCode;
	if (e.which)   key = e.which;

	// Reager på piletasterne, eller lad helt være med at lave noget
	switch (key) {
		case 37:	// Venstre
			venstre();
			break;
		case 38:	// Op
			op();
			break;
		case 39:	// Højre
			hoejre();
			break;
		case 40:	// Ned
			ned();
			break;
	}
	document.getElementById("keyOut").value = key;
	document.getElementById("tal-x").value = document.getElementById("billede").style.left;
	document.getElementById("tal-y").value = document.getElementById("billede").style.top;
}

Funktionerne venstre() op() hoejre() og ned() kan ses i zip-filen. De flytter bare på smileyen :-)

Koden med eksemplet kan findes i denne ZIP-fil - filen keyboard-easy.html, filen smil.gif skal placeres samme sted.

Koden anvender en simpel måde at finde browser-typen på, da det er nok at vide om det er Internet Exploer, eller om det er andre browsere - det testes ved at kigge på hvad eventen er gemt i.

Eksempel der anvender keyboard event på et input-felt

Til nogle anvendelser kan det været praktisk at kunne fange de indtastninger der sker i et bestemt input-felt. Det kunne f.x. være at man ønsker at hjælpe brugeren ved at der i felter hvor der kun må indtastes tal, at man kun giver muligheden for at taste tal, og alle andre taster ingen reaktion har.

Til dette er det en fordel at anvende onKeyPress, da den ikke kommer med piletaster, backspace og tabulator. Det har den fordel at de normale redigeringer i et input-felt stadig virker, uden man filtrerer på dem.

Man kobler en funktion på sit inputfelt på følgende måde:

<input type="text" id="testOut" onKeyPress="return keyFilter()" />

Læg mærke til at der skal stå return før funktionskaldet. Det betyder at den værdi der angiver om tasten skal anvendes eller ej, bliver returneret til styresystemet, så det kan reagere på det.

Måden man filtrerer på er så ved at tillade de taster man vil have ind i input-feltet at komme igennem ved at returnere true, når de kommer, og i alle andre tilfælde at returnere false.

Det kan ses i funktionen herunder.

function keyFilter(e) {
	if (IE) {
		e = window.event;
	}

	// Find  hvilken tast det er (browser-afhængigt)
	var key = 0;
	if (IE) key = e.keyCode;
	if (NS || FF || CH) key = e.which;

	if (FF) { // Firefox er lidt speciel. 
	          // I which ligger den tolkede kode ved onkeypress
	          // I keyCode ligger specialtasterne, så dem skal vi fange og lade komme igennem
		if (e.keyCode == 8) return true;  // Backspace
		if (e.keyCode == 46) return true; // Delete
		if (e.keyCode == 35) return true; // End
		if (e.keyCode == 36) return true; // Home
		if (e.keyCode == 37) return true; // Pil
		if (e.keyCode == 38) return true; // Pil
		if (e.keyCode == 39) return true; // Pil
		if (e.keyCode == 40) return true; // Pil
	}

	if (key == 44) {	// Hvis det er dansk komma, så ret til engelsk
		if (IE) window.event.keyCode = 46;
		// Det virker i Internet Explorer, da man retter i selve eventen
		// I Firefox og Chrome ser det ud til at man kun retter i det man har fået overført til funktionen
		//
		if (NS || FF || CH) e.which = 46;
		return true;
	}
	if (key == 46) return true; // Accepter engelsk komma
	if (key < 48) return false; // Filtrer alt under 0 fra
	if (key > 57) return false; // Filtrer alt over 9 fra
}

Koden med eksemplet kan findes i denne ZIP-fil - filen keyboard.html

Koden anvender også det at fange alle indtastninger, for at man kan se hvilken keyCode man har tastet.

I koden er lavet en lidt mere strikt måde at bestemme browser-typen på.Det er for at kunne skille den specielle måde at FireFox håndterer redigeringstasterne på (den er lidt anderledes).

Webcode
JavaScript	for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input	Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output	Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks	Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt	Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript	Date objektet - setTimeout - setInterval
PHP	Header - Include