Cómo capturar un retroceso en el evento onkeydown

Question

Tengo una función que se desencadena por el evento onkeydown de un cuadro de texto. ¿Cómo puedo saber si el usuario ha pulsado la tecla de retroceso o la tecla del?

Answer 1

Prueba esto:

document.addEventListener("keydown", KeyCheck); //or however you are calling your method 
function KeyCheck(event) 
{ 
    var KeyID = event.keyCode; 
    switch(KeyID) 
    { 
     case 8: 
     alert("backspace"); 
     break; 
     case 46: 
     alert("delete"); 
     break; 
     default: 
     break; 
    } 
} 

Answer 2

En su función comprueba el código de tecla 8 (retroceso) o 46 (borrar)

Keycode information
Keycode list

Answer 3

no está seguro de si se trabaja fuera de Firefox :

callback (event){ 
    if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE) 
    // do something 
    } 
} 

si no, sustituir event.DOM_VK_BACK_SPACE con 8 y event.DOM_VK_DELETE con 46 o definirlos como constante (para una mejor legibilidad)

Answer 4

Hoy en día, el código para hacer esto debería ser algo como:

document.getElementById('foo').addEventListener('keydown', function (event) { 
    if (event.keyCode == 8) { 
     console.log('BACKSPACE was pressed'); 

     // Call event.preventDefault() to stop the character before the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
    if (event.keyCode == 46) { 
     console.log('DELETE was pressed'); 

     // Call event.preventDefault() to stop the character after the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
}); 

aunque en el futuro, una vez que son ampliamente compatibles en los navegadores, es posible que desee utilizar los atributos .key o .code del KeyboardEvent en lugar del .keyCode obsoleto.

detalles vale la pena conocer:

• Calling event.preventDefault() en el controlador de un evento keydown evitará los efectos predeterminados de la pulsación de tecla. Al presionar un carácter, esto evita que se escriba en el campo de texto activo. Al presionar retroceso o eliminar en un campo de texto, evita que se elimine un carácter. Al presionar retroceder sin un campo de texto activo, en un navegador como Chrome donde el retroceso lo lleva de vuelta a la página anterior, evita ese comportamiento (siempre que capte el evento agregando su detector de eventos al document en lugar de un campo de texto).

• Documentación sobre cómo se determina el valor del atributo keyCode se puede encontrar en la sección B.2.1 How to determine keyCode for keydown and keyup events en la Especificación de interfaz de usuario Eventos del W3. En particular, los códigos para Retroceso y Borrar se enumeran en B.2.3 Fixed virtual key codes.

• hay un esfuerzo en marcha para despreciar el atributo .keyCode a favor de .key and .code. El W3 describe la propiedad .keyCode como "legacy", y MDN como "deprecated".

  Uno de los beneficios del cambio a .key y .code está teniendo más potentes y fáciles de programar el manejo de claves que no son ASCII - ver the specification that lists all the possible key values, que son cadenas legibles como "Backspace" y "Delete" e incluir valores para todo, desde las teclas modificadoras específicas a los teclados japoneses para oscurecer las teclas multimedia. Otro, que es muy relevante para esta pregunta, es distinguir entre el significado de una tecla presionada y la tecla física que se presionó.

  En small Mac keyboards, no hay Eliminar clave, una clave única Retroceso. Sin embargo, al pulsar Fn + Retroceso es equivalente a pulsar Eliminar en un teclado normal - es decir, se borra el carácter después el cursor de texto en lugar de la anterior. Dependiendo de su caso de uso, en código es posible que desee manejar una prensa de Retroceso con Fn pulsado ya sea como Retroceso o Supr. Es por eso que el nuevo modelo clave le permite elegir.

  El atributo .key le da el significado de la pulsación de tecla, por lo Fn +Retroceso producirá la cadena "Delete". El atributo .code le proporciona la clave física, por lo que Fn + Retroceso seguirá produciendo la cadena "Backspace".

  Desafortunadamente, al escribir esta respuesta, son solo supported in 18% of browsers, por lo que si necesita una amplia compatibilidad, por el momento está atascado con el atributo "heredado" .keyCode. Pero si usted es un lector del futuro, o si se orienta a una plataforma específica y saber que apoya la nueva interfaz, entonces se podría escribir código que parecía algo como esto:

  document.getElementById('foo').addEventListener('keydown', function (event) { 
      if (event.code == 'Delete') { 
       console.log('The physical key pressed was the DELETE key'); 
      } 
      if (event.code == 'Backspace') { 
       console.log('The physical key pressed was the BACKSPACE key'); 
      } 
      if (event.key == 'Delete') { 
       console.log('The keypress meant the same as pressing DELETE'); 
       // This can happen for one of two reasons: 
       // 1. The user pressed the DELETE key 
       // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where 
       // FN+BACKSPACE deletes the character in front of the text cursor, 
       // instead of the one behind it. 
      } 
      if (event.key == 'Backspace') { 
       console.log('The keypress meant the same as pressing BACKSPACE'); 
      } 
  }); 
  

Answer 5

evento .key === "retroceso" o "Borrar"

más reciente y mucho más limpia: event.key utilizar. ¡No más códigos de números arbitrarios!

input.addEventListener('keydown', function(event) { 
    const key = event.key; // const {key} = event; ES6+ 
    if (key === "Backspace" || key === "Delete") { 
     return false; 
    } 
}); 

Mozilla Docs

Supported Browsers