web-dev-qa-db-fra.com

touche et keyup - pourquoi le code clé est-il différent?

Connexes: JavaScript KeyCode vs CharCode

Voici du code que vous pouvez essayer chez vous ou dans un jsfiddle :

el.addEventListener( 'keyup', function( e ) { 
    console.log( 'Keyup event' );
    console.log( e.keyCode );
} ); 
el.addEventListener( 'keypress', function( e ) { 
    console.log( 'Keypress event' );
    console.log( e.keyCode );
} );

Pourquoi le code clé est-il différent?

Je peux comprendre pourquoi on doit utiliser uniquement la frappe au clavier, mais ce que je ne comprends pas, c'est comment deux événements de touche, donnant la même touche de raccourci sur le clavier, donnent des codes de clé différents.

PS: Je ne m'inquiète pas de la prise en charge des anciens navigateurs. J'ai essayé cela avec Chrome. J'étais surpris et je ne trouvais pas d'explication.

javascriptkeyboard
42
Florian Margaine

Les événements ont des objectifs complètement différents. Utilisez keyup et keydown pour identifier les clés physiques et keypress pour identifier les caractères saisis. Les deux sont des tâches fondamentalement différentes avec des événements différents; n'essayez pas de mélanger les deux. En particulier, keyCode sur keypress événements est généralement redondant et ne doit pas être utilisé (sauf dans les versions antérieures d'IE, mais consultez le document lié ci-dessous pour plus d'informations); pour les touches imprimables, c'est généralement la même chose que which et charCode, bien qu'il y ait quelques variations entre les navigateurs.

L'article de Jan Wolter sur les événements clés , déjà lié à une autre réponse, est pour moi le mot définitif à ce sujet et comporte des tableaux décrivant ce que chacune des différentes propriétés renvoie pour chaque type d'événement clé et chaque navigateur.

45
Tim Down

Il existe un bon article sur quirksmode.org répondant exactement à cette question. Vous voudrez peut-être aussi regarder les résultats d'Unixpapa .

2
Bergi

Eh bien, je suis tombé sur une différence lorsque j'essayais de copier l'entrée de l'utilisateur d'une entrée du formulaire vers une autre partie du formulaire, que j'avais verrouillée pour que mes utilisateurs puissent l'éditer… .. Ce que j'ai trouvé était que un utilisateur est passé à l'étiquette suivante à l'aide de la touche après avoir terminé la saisie. Une dernière entrée au clavier a été manquée dans l'entrée copiée lorsque j'ai utilisé eventListener pour appuyer sur une touche et le problème a été résolu à l'aide de keyup.

Donc, en conclusion, Keypress écoute l'état au moment où la touche a été pressée, en laissant de côté le résultat de la frappe , tandis que keyup écoute l'état du système après que la touche a été pressée et inclut le résultat de la appuyez sur la touche.

0
Mani