Auditeur JavaScript, "keypress" ne détecte pas le retour arrière?

141

J'utilise un keypressauditeur par exemple ..

addEventListener("keypress", function(event){

}

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

Puis-je utiliser un autre auditeur pour détecter cela?

Skizit
la source

Réponses:

167

KeyPress est appelé événement uniquement pour les clés caractères (imprimables), événement KeyDown est élevé pour tous , y compris par exemple non imprimable Control, Shift, Alt, BackSpace, etc.

METTRE À JOUR:

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

Référence .

Kris Ivanov
la source
3
Ce n'est pas strictement vrai: de nombreuses clés non imprimables déclenchent des keypressévénements dans de nombreux navigateurs. Voir unixpapa.com/js/key.html
Tim Down
Dans la version actuelle de Mozilla, le retour arrière et tout est détecté dans l'événement de pression de touche.
iniravpatel le
70

Essayez keydownau 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 keyupet que votre page ne verra donc pas l' keypressévénement.

Tomalak
la source
Je n'ai pas regardé dans les normes, mais l'ordre des événements (dans Firefox 37 au moins) semble être keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett
Il semble également que, pour les événements clés dans les entrées, le caractère n'apparaisse pas dans le champ tant que l' keyupévénement n'est pas déclenché.
jxmallett
Dernier - Sur iOS (8.2), la touche de retour arrière ne déclenche qu'un keydownévénement, mais le caractère n'est supprimé de l'entrée que quelque temps après.
jxmallett
c'est la réponse. cela capture la pression de la touche de suppression et la pression de la touche Ctrl + V
user1709076
30

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

J'ai créé un Jsfiddle pour comparer les événements du clavier (en utilisant les raccourcis JQuery) sur Chrome et Firefox. Selon le navigateur que vous utilisez, un keypressévénement sera déclenché ou non - le retour arrière se déclenchera keydown/keypress/keyupsur Firefox mais uniquement keydown/keyupsur Chrome.

Événements de clic unique déclenchés

sur Chrome

  • keydown/keypress/keyuplorsque le navigateur enregistre une entrée clavier ( keypressest déclenché)

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

  • keydown seulement pour l'onglet?

sur Firefox

  • keydown/keypress/keyuplorsque le navigateur enregistre une entrée au clavier mais aussi pour le retour arrière, les touches fléchées, l'onglet (donc ici keypressest 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: comme l'événement keypress n'est 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 cette spécification à des fins de référence et d'exhaustivité, mais cette spécification déconseille l'utilisation de ce type d'événement. Lorsqu'ils sont dans des contextes d'édition, les auteurs peuvent s'abonner à l'événement beforeinput à la place.


Enfin, pour répondre à votre question, vous devez utiliser keyupou keydownpour détecter un retour arrière sur Firefox et Chrome.


Essayez-le 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>

utilisateur2314737
la source
1
Réponse géniale - principalement pour l'explication des différentes façons de gérer le retour arrière entre les navigateurs
Jivan
2
W3School l'a déjà fait: w3schools.com/jsref/…
Tân
1
L'extrait de code a été très utile
John Gilmer
17

Quelque chose que j'ai écrit au cas où quelqu'un rencontre un problème avec des personnes qui frappent en arrière tout en pensant qu'elles sont 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');
    }
});
Seth McClaine
la source
8

Ma commande 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

VolkanCetinkaya
la source
6

event.key === "Retour arrière"

Plus récent et beaucoup plus propre: utilisation event.key. Fini les codes numériques arbitraires!

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

Documents Mozilla

Navigateurs pris en charge

Gibolt
la source
1
En 2018, c'est la meilleure façon de procéder!
tfantina le
J'utilise le code clé 8 pour le retour arrière dans toutes les langues avec lesquelles j'ai travaillé. Apprenez les codes ASCII, ils ne sont pas arbitraires.
André Werlang
3
Ce n'est pas parce que vous avez utilisé qu'il n'y a pas de meilleure option. .keyest actuellement l'option recommandée par la documentation. De plus, il prend en charge divers claviers internationaux avec différents mappages pour une touche donnée. Ils ne sont pas arbitraires dans le sens où ils sont fixes, mais ils le sont lors de la lecture de code
Gibolt
2

Utilisez à la place l'un des événements keyup / keydown / beforeinput.

sur la base de cette référence, la pression de touche est obsolète et n'est plus recommandée.

L'événement keypress est déclenché lorsqu'une touche qui produit une valeur de caractère est enfoncée. Les clés alphabétiques, numériques et de ponctuation sont des exemples de clés qui produisent une valeur de caractère. Les touches de modification telles que Alt, Maj, Ctrl ou Meta sont des exemples de touches qui ne produisent pas de valeur de caractère.

si vous utilisez "beforeinput", faites attention à sa compatibilité avec le navigateur . la différence entre "beforeinput" et les deux autres est que "beforeinput" est déclenché lorsque la valeur d'entrée est sur le point de changer, donc avec des caractères qui ne peuvent pas changer la valeur d'entrée, il n'est pas déclenché (par exemple shift, ctr, alt).

J'ai eu le même problème et en utilisant keyup, il a été résolu.

arash nadali
la source