type - onkeyup javascript enter

Cómo capturar un retroceso en el evento onkeydown

Question

Tengo una función que se activa 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

event.key === "Retroceso" o "Eliminar"

Más reciente y mucho más limpio: use event.key . 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;
    }
});

.key

Navegadores compatibles

Answer 2

En su función, compruebe el código de clave 8 (retroceso) o 46 (eliminar)

Información del código clave
Lista de claves

Answer 3

Hoy en día, el código para hacer esto debería verse 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 sean ampliamente compatibles con los navegadores, es posible que desee utilizar los .key o .code de KeyboardEvent lugar del .keyCode obsoleto.

Detalles que vale la pena conocer:

• Al llamar a event.preventDefault() en el controlador de un evento keydown se evitarán 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 retroceder o eliminar en un campo de texto, evita que se elimine un carácter. Al presionar la tecla de retroceso sin un campo de texto activo, en un navegador como Chrome, donde la tecla de retroceso lo lleva a la página anterior, evita ese comportamiento (siempre que detecte el evento agregando su detector de eventos al document lugar de un campo de texto).

• La documentación sobre cómo se determina el valor del atributo keyCode se puede encontrar en la sección B.2.1 Cómo determinar keyCode para eventos keydown y keyup en la especificación de eventos UI del W3. En particular, los códigos para Retroceso y Eliminar se enumeran en B.2.3 Códigos de clave virtual fijos .

• Hay un esfuerzo en curso para desaprobar el atributo .keyCode en favor de .key y .code . El W3 describe la propiedad .keyCode como "legacy" y MDN como .keyCode .

  Uno de los beneficios del cambio a .key y .code es tener un manejo más potente y fácil de usar de las claves no ASCII; consulte la especificación que enumera todos los valores clave posibles , que son cadenas legibles para el usuario como "Backspace" y "Delete" e incluya valores para todo, desde teclas modificadoras específicas hasta teclados japoneses para ocultar las teclas de medios. Otro, que es muy relevante para esta pregunta, es distinguir entre el significado de una pulsación de tecla modificada y la tecla física que se presionó .

  En los teclados pequeños de Mac , no hay una tecla Eliminar , solo una tecla de Retroceso . Sin embargo, presionar Fn + Retroceso es equivalente a presionar Eliminar en un teclado normal, es decir, elimina el carácter que está detrás del cursor de texto en lugar del anterior. Dependiendo de su caso de uso, en el código puede querer manejar una presión de Retroceso con Fn presionada como Retroceso o Eliminar. Es por eso que el nuevo modelo de llave te permite elegir.

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

  Desafortunadamente, al momento de escribir esta respuesta, solo se admiten en el 18% de los navegadores , por lo que si necesita una amplia compatibilidad, por el momento está bloqueado con el atributo "heredado". Pero si es un lector del futuro, o si está apuntando a una plataforma específica y sabe que es compatible con la nueva interfaz, entonces podría escribir un código que se pareciera a 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 4

No estoy seguro si funciona fuera de Firefox:

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

si no, reemplace event.DOM_VK_BACK_SPACE con 8 y event.DOM_VK_DELETE con 46 o event.DOM_VK_DELETE como constantes (para una mejor legibilidad)

Answer 5

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;
   }
}