web-dev-qa-db-fra.com

Écouteur JavaScript, "touche" ne détecte pas le retour arrière?

J'utilise un auditeur keypress par exemple ..

addEventListener("keypress", function(event){

}

Cependant, cela ne semble pas détecter un retour arrière qui efface le texte ...

Y a-t-il un auditeur différent que je peux utiliser pour détecter cela?

javascriptkeypressaddeventlistener
120
Skizit

L'événement KeyPress est appelé uniquement pour les clés de caractère (imprimables), l'événement KeyDown est déclenché pour tous, y compris les éléments non imprimables, tels que Control, Shift, Alt, BackSpace, etc.

MISE À JOUR:

L'événement de frappe est déclenché lorsqu'une touche est enfoncée et cette touche produit normalement une valeur de caractère

référence .

147
Kris Ivanov

Essayez keydown au lieu de keypress.

Les événements de clavier se produisent dans cet ordre: keydown, keyup, keypress

Le problème avec le retour arrière est probablement que le navigateur reviendra sur keyup et que votre page ne verra donc pas l'événement keypress.

60
Tomalak

L'événement keypress peut être différent d'un navigateur à l'autre.

J'ai créé un Jsfiddle pour comparer les événements de clavier (à l'aide des raccourcis JQuery) sur Chrome et Firefox. Selon le navigateur que vous utilisez, un keypress événement sera déclenché ou non - retour arrière déclenchera keydown/keypress/keyup sur Firefox mais seulement keydown/keyup sur Chrome.

Événements déclenchés par un seul clic

sur Chrome

  • keydown/keypress/keyup lorsque le navigateur enregistre une entrée au clavier (keypress est déclenché)

  • keydown/keyup si aucune entrée au clavier (testé avec alt, shift, backspace, touches fléchées)

  • keydown seulement pour tab?

sur Firefox

  • keydown/keypress/keyup lorsque le navigateur enregistre une entrée au clavier, mais aussi pour le retour arrière, les touches de direction, onglet (donc ici keypress est déclenché même sans entrée)

  • keydown/keyup pour alt, shift

Cela ne devrait pas être surprenant car selon https://api.jquery.com/keypress/ :

Remarque: l'événement de frappe n'étant couvert par aucune spécification officielle, le comportement réel rencontré lors de son utilisation peut différer selon les navigateurs, les versions de navigateur et les plates-formes.

L'utilisation du type d'événement keypress est déconseillée par le W3C ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress )

Le type d'événement keypress est défini dans la présente spécification pour référence et complétude, mais cette spécification déconseille l'utilisation de ce type d'événement. Dans les contextes d'édition, les auteurs peuvent plutôt s'abonner à l'événement beforeinput.

Enfin, pour répondre à votre question, vous devez utiliser keyup ou keydown pour détecter un retour arrière dans Firefox et Chrome.

Essayez ici: 

$(".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>
28
user2314737

Quelque chose que j'ai écrit au cas où quelqu'un rencontrerait un problème avec des personnes frappant le backspace tout en pensant être dans un champ de formulaire

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

Mon contrôle numérique:

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);" />

l'essayer

Le code de la touche BackSpace est 8

8
VolkanCetinkaya

event.key === "Backspace"

Plus récent et beaucoup plus propre: utilisez event.key. Plus de codes numériques arbitraires!

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

Mozilla Docs

Navigateurs pris en charge

3
Gibolt