événement de clé javascript (compatible avec tous les navigateurs)

Auteur：Eve Cole Date de mise à jour：2025-03-06 01:00:03

Partie 1 : Événements clés du navigateur

Pour implémenter le keylogging avec js, vous devez faire attention aux trois types d'événements clés du navigateur, à savoir keydown, keypress et keyup, qui correspondent respectivement aux trois handles d'événement onkeydown, onkeypress et onkeyup. Une pression de touche typique générera les trois événements, dans l'ordre keydown, keypress, puis keyup lorsque la touche est relâchée.

Parmi ces trois types d'événements, keydown et keyup sont de niveau relativement bas, tandis que keypress est relativement avancé. Ce qu'on appelle avancé signifie ici que lorsque l'utilisateur appuie sur shift + 1, la pression sur la touche analyse l'événement key et renvoie un caractère "!" imprimable, tandis que keydown et keyup enregistrent uniquement l'événement shift + 1. [1]

Cependant, la pression sur une touche n'est efficace que pour certains caractères pouvant être imprimés. Pour les touches de fonction, telles que F1-F12, Retour arrière, Entrée, Échap, PageUP, PageDown et les directions fléchées, l'événement keypress ne sera pas généré, mais keydown et keyup. peut être généré. Cependant, dans FireFox, les touches de fonction peuvent générer des événements de pression de touche.

Les objets événement transmis aux gestionnaires d'événements keydown, keypress et keyup ont certaines propriétés communes. Si Alt, Ctrl ou Shift sont enfoncés simultanément avec une touche, cela est représenté par les propriétés altKey, ctrlKey et shiftKey de l'événement, qui sont communes à FireFox et IE.

Deuxième partie : Navigateurs compatibles

Tout js impliquant des navigateurs doit prendre en compte les problèmes de compatibilité des navigateurs.

Actuellement, les navigateurs couramment utilisés sont principalement basés sur IE et basés sur Mozilla. Maxthon est basé sur le noyau IE, tandis que FireFox et Opera sont basés sur le noyau Mozilla.

2.1 Initialisation des événements

La première chose que vous devez savoir est comment initialiser l'événement. L'instruction de base est la suivante :

fonction keyDown(){}

document.onkeydown = keyDown;

Lorsque le navigateur lit cette instruction, il appellera la fonction KeyDown() quelle que soit la touche enfoncée sur le clavier.

2.2 Méthodes d'implémentation de FireFox et Opera

La mise en œuvre de programmes tels que FireFox et Opera est plus compliquée que celle d'IE, je vais donc la décrire ici en premier.

La fonction keyDown() a une variable cachée – généralement, nous utilisons la lettre « e » pour représenter cette variable.

touche de fonctionBas(e)

La variable e représente un événement de frappe. Pour trouver quelle touche a été enfoncée, utilisez l'attribut which :

e. lequel

e.qui donnera la valeur d'index de la clé. La méthode de conversion de la valeur d'index en valeur alphanumérique de la clé nécessite l'utilisation de la fonction statique String.fromCharCode(), comme suit :

String.fromCharCode (e. which)

En rassemblant les instructions ci-dessus, nous pouvons déterminer quelle touche a été enfoncée dans FireFox :

Copiez le code comme suit :

fonction keyDown(e) {

var keycode = e. which;

var realkey = String.fromCharCode(e.which);

alert("Code clé : " + code clé + " Caractère : " + realkey);

}

document.onkeydown = keyDown;

2.3 Méthode de mise en œuvre d'IE

Le programme d'IE n'a pas besoin de la variable e. Utilisez window.event.keyCode au lieu de e.which. La méthode de conversion de la valeur de l'index de clé en valeur de clé réelle est similaire : String.fromCharCode(event.keyCode). est la suivante :

Copiez le code comme suit :

fonction keyDown() {

var keycode = event.keyCode;

var realkey = String.fromCharCode(event.keyCode);

alert("Code clé : " + code clé + " Caractère : " + realkey);

}

document.onkeydown = keyDown;

2.4 Déterminer le type de navigateur

Nous avons appris ci-dessus comment obtenir des objets d'événement clés dans différents navigateurs. Nous devons maintenant déterminer le type de navigateur. Il existe de nombreuses méthodes, certaines sont plus faciles à comprendre et d'autres sont très intelligentes. Parlons d'abord de la méthode générale : c'est-à-dire. Utilisez l'attribut appName de l'objet navigateur. Bien entendu, vous pouvez également utiliser l'attribut userAgent. Ici, appName est utilisé pour déterminer le type de navigateur. L'appName d'IE et de Maxthon est "Microsoft Internet Explorer". , et le nom d'application de FireFox et Opera est "Netscape", donc un code avec une fonction relativement simple est le suivant :

Copiez le code comme suit :

fonction toucheUp(e) {

if(navigator.appName == "Microsoft Internet Explorer")

{

var keycode = event.keyCode;

var realkey = String.fromCharCode(event.keyCode);

}autre

{

var keycode = e. which;

var realkey = String.fromCharCode(e.which);

}

alert("Code clé : " + code clé + " Caractère : " + realkey);

}

document.onkeyup = keyUp;

Une méthode plus simple est [2] :

Copiez le code comme suit :

fonction toucheUp(e) {

var currKey=0,e=e||événement;

currKey=e.keyCode||e.which||e.charCode;

var keyName = String.fromCharCode(currKey);

alert("Code clé : " + currKey + " Caractère : " + keyName);

}

document.onkeyup = keyUp;

La méthode ci-dessus est plus intelligente. Laissez-moi l'expliquer brièvement :

Tout d'abord, le code e=e||event; est destiné à la compatibilité avec l'acquisition d'objets d'événement du navigateur. La signification de ce code dans js est que si la variable cachée e existe dans FireFox ou Opera, alors e||event renvoie e. Si la variable cachée e n'existe pas dans IE, alors l'événement est renvoyé.

Deuxièmement, currKey=e.keyCode | Il existe des attributs which et charCode dans Opera, et il y a des attributs keyCode et which dans Opera.

Le code ci-dessus est uniquement compatible avec le navigateur, obtient l'objet d'événement keyup et affiche simplement le code de la clé et les caractères des touches. Cependant, un problème survient lorsque vous appuyez sur une touche, les touches de caractères sont toutes en majuscules. appuyez sur la touche Maj, les caractères affichés sont très étranges, le code doit donc être optimisé.

Partie 3 : Implémentation et optimisation du code

3.1 Code clé et code de caractère de l'événement clé

Les codes clés et les codes de caractères des événements clés manquent de portabilité entre les navigateurs. Pour différents navigateurs et différents événements de cas, les méthodes de stockage des codes clés et des codes de caractères sont différentes.....

Dans IE, il n’existe qu’un seul attribut keyCode et son interprétation dépend du type d’événement. Pour keydown, keyCode stocke le code de la touche. Pour les événements keypress, keyCode stocke un code de caractère. Il n'y a pas d'attributs which et charCode dans IE, donc les attributs which et charCode sont toujours indéfinis.

Le keyCode dans FireFox est toujours 0. Lorsque l'heure est keydown/keyup, charCode=0, qui est le code clé. Lorsque l'événement keypress se produit, dont les valeurs et charCode sont les mêmes, et le code de caractère est stocké.

Dans Opera, les valeurs de keyCode et qui sont toujours les mêmes. Dans l'événement keydown/keyup, ils stockent le code de la touche, ils stockent le code du caractère, et charCode n'est pas défini et est toujours indéfini.

3.2 Utiliser keydown/keyup ou keypress

La première partie a introduit la différence entre keydown/keyup et keypress. Il existe une règle générale selon laquelle l'événement keydown est plus utile pour les touches de fonction, tandis que l'événement keypress est plus utile pour les touches imprimables [3].

La journalisation du clavier concerne principalement les caractères imprimables et certaines touches de fonction, donc la pression sur une touche est le premier choix. Cependant, comme mentionné dans la première partie, la pression sur une touche dans IE ne prend pas en charge les touches de fonction, donc les événements keydown/keyup doivent être utilisés pour la compléter.

3.3 Mise en œuvre du code

L'idée générale est d'utiliser l'objet événement keypress pour obtenir des caractères clés et d'utiliser l'événement keydown pour obtenir des caractères de fonction, tels que Entrée, Retour arrière, etc.

L'implémentation du code est la suivante

Copiez le code comme suit :

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//FR">

<HTML>

<HEAD><TITLE>Enregistrement des frappes js</TITLE>

</HEAD>

<CORPS>

var keystring = "";//Enregistrer la chaîne de clé

function $(s){retour document.getElementById(s)?document.getElementById(s):s;}

touche de fonction appui(e)

{

var currKey=0,CapsLock=0,e=e||event;

currKey=e.keyCode||e.which||e.charCode;

CapsLock=currKey>=65&&currKey<=90;

commutateur (currKey)

{

// Bloquer le retour arrière, la tabulation, le retour chariot, l'espace, les touches de direction et les touches de suppression

cas 8 : cas 9 : cas 13 : cas 32 : cas 37 : cas 38 : cas 39 : cas 40 : cas 46 : keyName = " » ; break ;

par défaut : keyName = String.fromCharCode (currKey);

}

chaîne de clé += nom de clé ;

}

touche de fonction enfoncée (e)

{

var e=e||événement;

var currKey=e.keyCode||e.which||e.charCode;

si((currKey>7&&currKey<14)||(currKey>31&&currKey<47))

{

commutateur (currKey)

{

cas 8 : keyName = "[Retour arrière]" ;

cas 9 : keyName = "[Tabulation]" ;

cas 13 :keyName = "[Entrée]" ;

cas 32 :keyName = "[espace]" ;

cas 33 : keyName = "[PageUp]" ;

cas 34 : keyName = "[PageDown]" ;

cas 35 :keyName = "[Fin]" ;

cas 36 :keyName = "[Accueil]" ;

case 37:keyName = "[flèche gauche]" ;

case 38:keyName = "[flèche vers le haut]" ;

case 39:keyName = "[flèche droite]" ;

case 40:keyName = "[flèche vers le bas]" ;

cas 46:keyName = "[Supprimer]" ; break ;

par défaut:keyName = "" ; pause ;

}

chaîne de clé += nom de clé ;

}

$("content").innerHTML=chaîne de clés;

}

touche de fonction(e)

{

$("content").innerHTML=chaîne de clés;

}

document.onkeypress=keypress;

document.onkeydown =keydown;

document.onkeyup =keyup;

</script>

<br/>Veuillez appuyer sur n'importe quelle touche pour afficher la valeur de la touche de réponse du clavier : <span id="content"></span>

</CORPS>

</HTML>

Analyse des codes :

$() : Obtenez le dom en fonction de l'ID

keypress(e) : implémente l'interception des codes de caractères Puisque les touches de fonction doivent être obtenues à l'aide de keydown, ces touches de fonction sont bloquées en appuyant sur une touche.

keydown(e) : réalise principalement l'acquisition de touches de fonction.

keyup(e) : affiche la chaîne interceptée.