Utilia

Cercador de codis de tecla

Prem qualsevol tecla per veure els valors event.key, event.code, keyCode, which i location de JavaScript, amb modificadors, historial i taula de keycodes.

Prem «Comença a capturar tecles» o fes clic al quadre de sota i després prem qualsevol tecla. Fes clic fora del quadre per tornar el teclat a la pàgina.

event.key Prem una tecla keyCode – Aquí també es capturen el tabulador, les fletxes i les dreceres.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Tecles de bloqueig activades
–
Modificadors
ctrlKey shiftKey altKey metaKey
Historial de tecles (primer la darrera)
Historial de tecles (primer la darrera)
EsdevenimentkeycodekeyCodelocationModificadorsrepeat
Referència de codis de tecla (QWERTY dels EUA)

Referència de codis de tecla (QWERTY dels EUA)
keycodekeyCodelocationNota

els valors de key són per a una disposició dels EUA sense modificadors; altres disposicions produeixen altres caràcters amb el mateix code. keyCode i which són obsolets, però encara s'utilitzen molt.

Com trobar el codi d’una tecla

  1. Prem Comença a capturar tecles o fes clic al quadre gran. Una vora de color indica que està escoltant.
  2. Prem qualsevol tecla o drecera. La pantalla gran mostra el valor de key i el keyCode antic, i les targetes de sota llisten event.key, event.code, event.keyCode, event.which, event.location, event.repeat i les Tecles de bloqueig activades (Bloq Maj, Bloq Num, AltGraph).
  3. Les insígnies de Modificadors s’il·luminen per a ctrlKey, shiftKey, altKey i metaKey.
  4. Copia el Fragment de JavaScript per a aquesta tecla. Amb Comparar per pots triar entre event.key, event.code o event.keyCode (legacy).
  5. Desplaça’t per l’Historial de tecles (primer la darrera) per comparar diverses pulsacions. Marca Registra també els esdeveniments keyup per veure també quan s’amolla la tecla.
  6. Consulta o filtra la taula Referència de codis de tecla (QWERTY dels EUA) quan necessitis un valor sense prémer la tecla.

Mentre el quadre té el focus, l’acció per defecte de cada tecla es bloqueja; així, el tabulador, les fletxes, Retrocés o Ctrl+S es capturen en lloc de moure el focus o obrir un diàleg. Fes clic en qualsevol lloc fora del quadre per tornar el teclat a la pàgina. Algunes dreceres les gestiona el sistema operatiu abans que el navegador les vegi (Alt+Tab, Ctrl+Alt+Supr, Cmd+Tab, sovint Impr Pant), de manera que cap pàgina web no les pot llegir.

key, code o keyCode: quin has d’utilitzar?

Un KeyboardEvent conté diversos valors que responen preguntes diferents:

Propietat Què t’indica Exemple (la tecla A en AZERTY)
key El caràcter o la tecla amb nom produïts, segons la disposició i els modificadors "a", "A" amb Maj
code La posició física de la tecla, independent de la disposició "KeyQ"
keyCode / which Un número antic, normalment el codi ASCII de la lletra en majúscula 65
location 0 estàndard, 1 esquerra, 2 dreta, 3 teclat numèric 0

Fes servir key quan importa el significat: Enter per enviar, Escape per tancar, «?» per obrir un panell d’ajuda. Fes servir code per a jocs i dreceres que depenen de la posició de les tecles, com el moviment amb WASD, que ha de quedar al mateix lloc en un teclat AZERTY francès o QWERTZ alemany. Evita keyCode i which en codi nou: són obsolets, els seus valors varien entre navegadors per a la puntuació (Firefox envia 59 per al punt i coma, on Chrome n’envia 186) i no poden distingir entre els Maj esquerre i dret, ni entre les dues tecles Enter. Tot i així, convé conèixer-los quan mantens codi més antic, i per això aquesta eina els mostra.

Sobre el fragment de codi

El listener generat coincideix amb la tecla exacta que has premut, incloent-hi Ctrl, Alt i Meta. Per als caràcters imprimibles comparats amb key, Maj s’omet perquè ja forma part del valor: Maj+1 dona "!" en una disposició dels EUA. Quan prems un modificador sol, el fragment no en repeteix l’indicador. Recorda que metaKey és la tecla Cmd en un Mac i la tecla Windows en un PC; per això les dreceres multiplataforma solen comprovar event.ctrlKey || event.metaKey.

Preguntes freqüents

Per què keyCode mostra el mateix número per a caràcters diferents?

keyCode identifica la tecla, no el caràcter. El dígit 1 i «!» comparteixen el 49, i «a» i «A» comparteixen el 65. Llegeix key per obtenir el caràcter real.

Per què la meva tecla AZERTY es mostra com a KeyQ?

code anomena les tecles segons la posició en un teclat QWERTY dels EUA. La tecla marcada amb A en un teclat francès és on hi ha la Q en un teclat dels EUA; per això el seu code és KeyQ mentre que el seu key és «a».

Què vol dir «Dead» a event.key?

És una tecla morta, com ^ o ¨ en un teclat francès, que espera la tecla següent per formar una lletra accentuada. El caràcter final el lliura l’esdeveniment de la tecla següent o l’esdeveniment input d’un camp de text.

Per què event.repeat diu que sí?

Estàs mantenint la tecla premuda i el sistema operatiu envia repeticions automàtiques. Comprova event.repeat per ignorar-les, per exemple per disparar una drecera només una vegada.

Es registra o s'envia alguna cosa del que escric?

No. Els esdeveniments de tecla els llegeix aquesta pàgina al teu navegador i no s’envien enlloc. L’historial desapareix quan recarregues o surts de la pàgina.