javascript - event - onkeypress html5

Escucha de JavaScript, "presionar teclas" no detecta el retroceso?

Question

Estoy usando un oyente de keypress por ejemplo ...

addEventListener("keypress", function(event){

}

sin embargo, esto no parece detectar un retroceso que borre texto ... ¿hay un oyente diferente que pueda usar para detectar esto?

Answer 1

event.key === "Retroceso"

Más reciente y mucho más limpio: use 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 compatibles

Answer 2

Algo que escribí en caso de que alguien se topara con un problema cuando las personas golpeaban hacia atrás mientras pensaban que estaban en un campo de forma

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

Answer 3

El evento KeyPress se invoca solo para las teclas de caracteres (imprimibles), el evento KeyDown se genera para todos, incluidos los no imprimibles, como Control , Mayús , Alt , BackSpace , etc.

ACTUALIZAR:

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

Reference .

Answer 4

El evento de keypress puede ser diferente en todos los navegadores.

Jsfiddle un Jsfiddle para comparar eventos de teclado (usando los accesos directos de JQuery) en Chrome y Firefox. Dependiendo del navegador que esté utilizando, se activará o no un evento de keypress . El retroceso activará la keydown/keypress/keyup en Firefox, pero solo la keydown/keyup en Chrome.

Eventos de un solo clic de tecla activados

en Chrome

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

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

• keydown solo para la pestaña?

en Firefox

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

• keydown/keyup para alt, shift

Esto no debería sorprender porque de acuerdo con https://api.jquery.com/keypress/ :

Nota: como el evento de pulsación de tecla no está cubierto por ninguna especificación oficial, el comportamiento real que se encuentra al usarlo puede diferir según el navegador, la versión del navegador y la plataforma.

El uso del tipo de evento de pulsación de tecla está obsoleto 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 desaprueba el uso de este tipo de evento. En contextos de edición, los autores pueden suscribirse al evento beforeinput en su lugar.

Finalmente, para responder a su pregunta, debe usar la función de keyup o de keydown para detectar 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>

Answer 5

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 la tecla BackSpace es 8

Answer 6

Pruebe el keydown de la keypress lugar de keydown keypress .

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

El problema con el retroceso probablemente sea que el navegador navegará de nuevo en la keyup y, por lo tanto, su página no verá el evento de keypress .