Forskel mellem versioner af "Keyboard event"

Fra Holstebro HTX Wiki
Skift til: navigering, søgning
(Eksempel der fanger alle keyboard input)
Linje 24: Linje 24:
  
 
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.
 
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 anvender keyboard event på et input-felt==
 
Til nogle anvendelser kan det været praktisk at kunne fange de indtastninger der sker i et 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.
 
 
<pre>
 
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 (key == 44) { // Hvis det er dansk komma, så ret til engelsk
 
if (IE) window.event.keyCode = 46;
 
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
 
}
 
</pre>
 
 
Koden med eksemplet kan findes i denne [[Media:keyboard_event.zip|ZIP-fil]] - filen keyboard.html
 
  
 
==Eksempel der fanger alle keyboard input==
 
==Eksempel der fanger alle keyboard input==
Linje 111: Linje 72:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
Funktionerne venstre() op() hoejre() og ned() kan ses i zip-filen. De flytter bare på smileyen :-)
  
 
Koden med eksemplet kan findes i denne [[Media:keyboard_event.zip|ZIP-fil]] - filen keyboard-easy.html, filen smil.gif skal placeres samme sted.
 
Koden med eksemplet kan findes i denne [[Media:keyboard_event.zip|ZIP-fil]] - filen keyboard-easy.html, filen smil.gif skal placeres samme sted.
 +
 +
==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.
 +
 +
<pre>
 +
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 (key == 44) { // Hvis det er dansk komma, så ret til engelsk
 +
if (IE) window.event.keyCode = 46;
 +
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
 +
}
 +
</pre>
 +
 +
Koden med eksemplet kan findes i denne [[Media:keyboard_event.zip|ZIP-fil]] - filen keyboard.html

Versionen fra 6. sep 2011, 06:13

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.

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 (key == 44) {	// Hvis det er dansk komma, så ret til engelsk
		if (IE) window.event.keyCode = 46;
		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