Gestió d'esdeveniments¶
Esdeveniments del teclat¶
Són aquells que reaccionen en el moment de prémer una tecla del teclat.
Tots aquests esdeveniments reben com a paràmetre un objecte que conté propietats amb la informació relacionada a l'esdeveniment.
Cancel·lació de tecles
Si la funció associada a un esdeveniment retorna el valor false, la pulsació de tecla no s'envia al control corresponent. Per exemple, dins d'un control <input> no s'escriuria el caràcter pressionat per l'usuari.
onkeydown¶
Detecta el moment en que es pressiona una tecla del teclat sobre l'element que té l'esdeveniment corresponent associat.
Podem determinar quina és la tecla premuda llegint les propietats key o code de l'esdeveniment de retorn.
| Propietat | |
|---|---|
| key | Retorna un valor que representa un caràcter. Per exemple, retorna valors diferents per lletres majúscules i minúscules encara que s'escriguin amb la mateixa tecla, però el mateix valor per tecles del teclat repetides. |
| code | Retorna un valor que representa una tecla física. Per exemple, retornarà sempre el mateix valor per tecles que tinguin múltiples funcions, com ara les del teclat numèric. |
| altKey | Retorna un boolà que val true si s'estava prement la tecla Alt en generar l'esdeveniment |
| ctrlKey | Retorna un boolà que val true si s'estava prement la tecla Ctrl en generar l'esdeveniment |
| shiftKey | Retorna un boolà que val true si s'estava prement la tecla Shift en generar l'esdeveniment |
| metaKey | Retorna un boolà que val true si s'estava prement la tecla Meta en generar l'esdeveniment |
Repetició de tecles
Si es manté la tecla pressionada, l'esdeveniment onkeydown es va repetint contínuament.
document.getElementById( ... ).onkeydown = function ( e )
{
this.value = `Acabes de pressionar la tecla [${e.key}]`
return false;
}
Combinant onkeydown i return false a la funció d'esdeveniment, podem detectar tecles que no volem que es premin i filtar-les.
Per exemple en controls de text:
document.getElementById("nomUsuari").onkeydown = function ( e ) {
if ("1234567890".includes( e.key )) {
return false
}
}
Podem fer-ho també amb preventDefault
Si no volem encara finalitzar la funció amb un return, podem aconseguir el mateix resultat amb aquest codi:
document.getElementById("nomUsuari").onkeydown = function ( e ) {
if ("1234567890".includes( e.key )) {
e.preventDefault()
}
}
onkeyup¶
Detecta el moment en que es deixa anar una tecla del teclat sobre l'element que té l'esdeveniment corresponent associat.
Podem determinar quina és la tecla premuda llegint les propietats key o code de l'esdeveniment de retorn.
| Propietat | |
|---|---|
| key | Retorna un valor que representa un caràcter. Per exemple, retorna valors diferents per lletres majúscules i minúscules encara que s'escriguin amb la mateixa tecla, però el mateix valor per tecles del teclat repetides. |
| code | Retorna un valor que representa una tecla física. Per exemple, retornarà sempre el mateix valor per tecles que tinguin múltiples funcions, com ara les del teclat numèric. |
| altKey | Retorna un boolà que val true si s'estava prement la tecla Alt en generar l'esdeveniment |
| ctrlKey | Retorna un boolà que val true si s'estava prement la tecla Ctrl en generar l'esdeveniment |
| shiftKey | Retorna un boolà que val true si s'estava prement la tecla Shift en generar l'esdeveniment |
| metaKey | Retorna un boolà que val true si s'estava prement la tecla Meta en generar l'esdeveniment |
Repetició de tecles
Si es manté la tecla pressionada, l'esdeveniment onkeydown es va repetint contínuament.
document.getElementById( ... ).onkeyup = function ( e )
{
this.value = `Acabes de deixar anar la tecla [${e.key}]`
return false;
}
Exemples¶