Propiedad keyCode de KeyboardEvent

Eventos DOM KeyboardEvent

Definición y uso

La propiedad keyCode devuelve el desencadenante Evento onkeypress Código de carácter Unicode del tecla, o desencadena onkeydown o Evento onkeyup Código de tecla Unicode del teclado.

Diferencias entre los dos tipos de códigos:

  • Código de caracteres - número que representa el carácter ASCII
  • Código de tecla - representa el número de la tecla real en el teclado

Estos tipos no siempre significan lo mismo. Por ejemplo, las teclas "w" minúscula y "W" mayúscula tienen el mismo código de teclado, ya que la tecla pulsada es la misma ("W" = número "87"), pero los códigos de caracteres son diferentes, ya que el carácter resultante es diferente ("w" o "W", es decir, "119" o "87"). - Consulte los siguientes ejemplos para tener una mejor comprensión.

Consejo:Para saber si el usuario pulsó una tecla imprimible (por ejemplo, "a" o "5"), se recomienda usar esta propiedad en el evento onkeypress. Para entender si el usuario pulsó una tecla de función (por ejemplo, "F1", "CAPS LOCK" o "Home"), utilice los eventos onkeydown o onkeyup.

Comentario:En Firefox, el atributo keyCode no funciona en el evento onkeypress (solo devuelve 0). Para una solución compatible entre navegadores, utilice Atributo whichPor ejemplo, utilícelo junto con keyCode

var x = event.which || event.keyCode;  // Use which o keyCode según el soporte del navegador

Consejo:Para obtener una lista de todos los caracteres Unicode, consulte nuestra Referencia completa de Unicode.

Consejo:Si desea convertir un valor Unicode en un carácter, utilice Método fromCharCode().

Comentario:Esta propiedad es de solo lectura.

Comentario:Se proporcionan las propiedades keyCode y which solo por compatibilidad. La última versión de la especificación de eventos DOM sugiere usar la propiedad key (si está disponible) en su lugar.

Consejo:Si desea saber si se pulsó la tecla "ALT", "CTRL", "META" o "SHIFT" en el momento del evento de pulsación de tecla, utilice altKey,ctrlKey/,metaKey o shiftKey Atributo.

Ejemplo

Ejemplo 1

Obtener el valor Unicode de la tecla pulsada:

var x = event.keyCode;

Prueba por tu cuenta

Ejemplo 2

Utilice onkeypress y onkeydown para demostrar la diferencia entre los códigos de caracteres y los códigos de teclado:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Código de CARÁCTER Unicode: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Código de KEY Unicode: " + key;
}

Al presionar la tecla "a" del teclado (sin usar Capslock), los resultados de char y key serán:

Código de CARÁCTER Unicode: 97
Código de KEY Unicode: 65

Prueba por tu cuenta

Ejemplo 3

Si el usuario presiona la tecla Escape, se mostrará algún texto:

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 es la tecla ESC
    alert("¡Has presionado la tecla de Escape!");
  }
}

Prueba por tu cuenta

Ejemplo 4

Convertir el valor Unicode a un carácter (no se aplica a las teclas de función):

var x = event.keyCode;                // Obtener el valor Unicode
var y = String.fromCharCode(x);       // Convertir el valor a un carácter

Prueba por tu cuenta

Sintaxis

event.keyCode

Detalles técnicos

Valor devuelto: Valor numérico que representa el código de carácter Unicode o el código de tecla Unicode.
Versión DOM: Eventos DOM Nivel 2

Compatibilidad con navegadores

Atributos Chrome IE Firefox Safari Opera
keyCode Soporte Soporte Soporte Soporte Soporte

Páginas relacionadas

Manual de referencia HTML DOM:Atributo key de KeyboardEvent

Manual de referencia HTML DOM:Atributo charCode de KeyboardEvent

Manual de referencia HTML DOM:Atributo which de KeyboardEvent

Eventos DOM KeyboardEvent