Búsqueda de sitios web

¿El listener de JavaScript, "keypress", no detecta la tecla de retroceso?

Estoy usando un listener keypress por ejemplo..

addEventListener("keypress", function(event){

}

Sin embargo, esto no parece detectar un retroceso que borra texto...

¿Hay un oyente diferente que pueda usar para detectar esto?

Respuesta #1

El evento KeyPress se invoca solo para teclas de caracteres (imprimibles), el evento KeyDown se genera para todas, incluidas las no imprimibles como Control, Shift, Alt, BackSpace, etc.

ACTUALIZACIÓN :

El evento keypress se dispara cuando se presiona una tecla y esa tecla normalmente produce un valor de carácter

Referencia.

Respuesta #2

Intenta keydown en lugar de keypress.

Los eventos del teclado ocurren en este orden: keydown, keyup, keypress

El problema con la tecla de retroceso probablemente sea que el navegador navegará hacia atrás en keyup y, por lo tanto, tu página no verá el evento keypress.

Respuesta #3

El evento keypress podría ser diferente en distintos navegadores.

Creé un Jsfiddle para comparar eventos de teclado (usando los atajos de JQuery) en Chrome y Firefox. Dependiendo del navegador que estés usando, se disparará un evento keypress o no: la tecla de retroceso disparará keydown/keypress/keyup en Firefox pero solo keydown/keyup en Chrome.

Eventos de clic de tecla única activados

en Chrome

  • keydown/keypress/keyup cuando el navegador registra una entrada de teclado (keypress se dispara)

  • keydown/keyup si no hay entrada del teclado (probado con alt, shift, retroceso, teclas de flecha)

  • ¿keydown solo para tab?

en Firefox

  • keydown/keypress/keyup cuando el navegador registra una entrada de teclado, pero también para retroceso, teclas de flecha, tabulación (así que aquí keypress se dispara incluso sin entrada)

  • keydown/keyup para alt, shift

Esto no debería ser sorprendente porque según https://api.jquery.com/keypress/:

Nota: dado que el evento de pulsación de tecla no está cubierto por ninguna especificación oficial, el comportamiento real que se encuentre al usarlo puede diferir entre navegadores, versiones de navegador y plataformas.

El uso del tipo de evento keypress está en desuso según W3C (http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress)

El tipo de evento keypress se define en esta especificación como referencia y para mayor completitud, pero esta especificación desaprueba el uso de este tipo de evento. Cuando se esté en contextos de edición, los autores pueden suscribirse al evento beforeinput en su lugar.

Finalmente, para responder a tu pregunta, deberías usar keyup o keydown para detectar una retroceso en Firefox y Chrome.

Pruébalo aquí:

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>

Respuesta #4

Algo que escribí por si alguien se encuentra con un problema de personas presionando retroceso mientras piensan que están en un campo de formulario

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});

Respuesta #5

event.key === "Retroceso"

Más reciente y mucho más limpio: usa event.key. ¡No más códigos numéricos arbitrarios!

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

Documentos de Mozilla

Navegadores compatibles

Artículos relacionados