Escucha de JavaScript, ¿"presionar tecla" no detecta retroceso?


141

Estoy usando un keypressoyente, por ejemplo ...

addEventListener("keypress", function(event){

}

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

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

Respuestas:


167

Evento KeyPress se invoca sólo por el carácter teclas (imprimibles), evento KeyDown se levanta para todos incluyendo no imprimible tales como Control, Shift, Alt, BackSpace, etc.

ACTUALIZAR:

El evento de pulsación de tecla se activa cuando se presiona una tecla y esa tecla normalmente produce un valor de carácter

Referencia .


3
No es estrictamente cierto: muchas teclas no imprimibles activan keypresseventos en muchos navegadores. Ver unixpapa.com/js/key.html
Tim Down

En la versión actual de Mozilla, la retroceso y todo se detecta en el evento de pulsación de tecla.
iniravpatel

70

Intenta en keydownlugar de keypress.

Los eventos de teclado se producen en este orden: keydown, keyup,keypress

El problema con el retroceso probablemente es que el navegador volverá a navegar keyupy, por lo tanto, su página no verá el keypressevento.


No he examinado los estándares, pero el orden de los eventos (al menos en Firefox 37) parece ser keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett

También parece que, para eventos clave en las entradas, el carácter no aparece en el campo hasta keyupque se desencadena el evento.
jxmallett

Último: en iOS (8.2), la tecla de retroceso solo activa un keydownevento, pero el carácter no se elimina de la entrada hasta algún momento después de eso.
jxmallett

esta es la respuesta. esto captura la tecla de borrar y la tecla Ctrl + V
user1709076

30

El keypressevento puede ser diferente en todos los navegadores.

Creé un Jsfiddle para comparar eventos de teclado (usando los atajos de JQuery) en Chrome y Firefox. Dependiendo del navegador que esté utilizando, un keypressevento se activará o no; la retroceso se activará keydown/keypress/keyupen Firefox pero solo keydown/keyupen Chrome.

Eventos de clics únicos activados

en Chrome

  • keydown/keypress/keyupcuando el navegador registra una entrada de teclado ( keypressse activa)

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

  • keydown solo para tab?

en Firefox

  • keydown/keypress/keyupcuando el navegador registra una entrada de teclado pero también para retroceso, teclas de flecha, pestaña (por lo que aquí keypressse dispara incluso sin entrada)

  • keydown/keyup para alt, shift


Esto no debería ser sorprendente porque de acuerdo con 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 encontrado al usarlo puede diferir entre navegadores, versiones de navegador y plataformas.

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

El tipo de evento de pulsación de tecla se define en esta especificación para referencia e integridad, pero esta especificación desprecia el uso de este tipo de evento. Cuando están en contextos de edición, los autores pueden suscribirse al evento beforeinput en su lugar.


Finalmente, para responder a su pregunta, debe usar keyupo keydowndetectar un 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>


1
Respuesta impresionante, principalmente por la explicación de las diferentes formas de manejar el espacio de retroceso en los navegadores
Jivan

2
W3School ya lo hizo: w3schools.com/jsref/…
Tân

1
Fragmento de código fue muy útil
John Gilmer

17

Algo que escribí en caso de que alguien encuentre un problema con las personas presionando la tecla de 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');
    }
});

8

Mi control numérico:

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

intentalo

El código de tecla de retroceso es 8


6

event.key === "Retroceso"

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

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

Documentos de Mozilla

Navegadores Soportados


1
¡En 2018, esta es la mejor manera de hacerlo!
tfantina

He estado usando el código clave 8 para retroceder en cada idioma con el que trabajé. Aprenda los códigos ASCII, no son arbitrarios.
André Werlang

3
El hecho de que haya estado usando no significa que no haya una mejor opción. .keyActualmente es la opción recomendada por los documentos. Además, admite varios teclados internacionales con diferentes asignaciones para cualquier tecla dada. No son arbitrarios en el sentido de que son fijos, pero lo son al leer el código
Gibolt

2

Utilice uno de los eventos keyup / keydown / beforeinput en su lugar.

según esta referencia, la pulsación de tecla está en desuso y ya no se recomienda.

El evento de pulsación de tecla se activa cuando se presiona una tecla que produce un valor de carácter. Ejemplos de teclas que producen un valor de caracteres son las teclas alfabéticas, numéricas y de puntuación. Ejemplos de teclas que no producen un valor de caracteres son las teclas modificadoras como Alt, Shift, Ctrl o Meta.

si usa "beforeinput", tenga cuidado con la compatibilidad del navegador . la diferencia entre "beforeinput" y los otros dos es que "beforeinput" se dispara cuando el valor de entrada está a punto de cambiar, por lo que con los caracteres que no pueden cambiar el valor de entrada, no se dispara (por ejemplo, shift, ctr, alt).

Tuve el mismo problema y al usar keyup se resolvió.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.