Controllare un elemento html con la tastiera

Non serve quasi a niente, lo so. Però possiamo farlo, quindi facciamolo. Google Maps permette, attraverso un'apposito parametro, di attivare la navigazione attraverso le classiche "frecce" della tastiera. Allo stesso modo è possibile controllare e modificare il posizionamento di un elemento HTML (immagine, div, quello-che-vi-pare) intercettando la pressione dei tasti (qualsiasi tasto voi vogliate, non solo le frecce) utilizzando qualche riga di JavaScript.

LE BASI
Questo semplice script, inserito in una pagina HTML, permette di visualizzare il keycode di ogni tasto presente sulla vostra tastiera:

// All'evento "onkeydown" viene chiamata la funzione sposta()
document.onkeydown = sposta;  	
 
function sposta(e)
{
     var codice; 		
 
     // Internet Explorer o Firefox?
     // Intercetto l'evento e lo metto nella variabile "codice"
     if (window.event) codice = window.event.keyCode;
     else if (e) codice = e.which;
 
     // Alert del codice
     alert(codice);
}

Vedrete che ogni tasto ha un codice diverso. Nel nostro caso ci interessano i 4 codici relativi alle frecce direzionali:

• Sinistra: 37
• Giù: 40
• Destra: 39
• Su: 38

Vediamo ora come utilizzare questi codici per muovere una div: la funzione è simile a quella appena vista, alla pressione del tasto viene controllato il codice ritornato e se corrisponde ad uno dei 4 codici delle "frecce" viene modificato il CSS della DIV di conseguenza.

MUOVERE UNA DIV
Come al solito è più facile vedere un esempio che spiegare a parole il funzionamento: il CSS della DIV viene modificato a seconda del tasto premuto.

// All'evento "onkeydown" viene chiamata la funzione sposta()
document.onkeydown = sposta;  	
 
function sposta(e)
{
	var codice;
	var next;
 
	// Internet Explorer o Firefox?
	// Intercetto l'evento e lo metto nella variabile "codice"
	if (window.event) codice = window.event.keyCode;
	else if (e) codice = e.which;
 
	// Vari casi:
	switch(codice)
	{
		// Freccia su
		case 38:
			next = parseInt($("rosso").style.top) - 5;
			$("rosso").style.top = next + "px";
		break;
 
		// Freccia sinistra
		case 37:
			next = parseInt($("rosso").style.left) - 5;
			$("rosso").style.left = next + "px";
		break;
 
		// Freccia destra
		case 39:
			next = parseInt($("rosso").style.left) + 5;
			$("rosso").style.left = next + "px";
		break;
 
		// Freccia giù
		case 40:
			next = parseInt($("rosso").style.top) + 5;
			$("rosso").style.top = next + "px";
		break;
 
		default: void(0);
	}
}

Facile no? La variabile next viene usata come appoggio per calcolare il valore in pixel della proprietà top o left che la DIV, posizionata "absolute" andrà ad assumere.

Gli usi sono pressoché infiniti se ci si ragiona un po' su: navigazione di immagini, giochini, ecc... Nell'esempio non vengono considerati i bordi della pagina: come dicono all'università "ve lo lascio come esercizio".

OCCHIO!
Il post non mostra correttamente la riga next + "px", mostra solamente next "px". Se volete copiare il codice, copiatelo dall'esempio...