Manipulation des contrôles clavier
Cette astuce a pour but de vous faire découvrir la (ou du moins une) manière de contrôler les évènements clavier en javascript.
Cela vous permettra de contrôler/attribuer les/des comportements particuliers à certaines touches du clavier.
Techniques pré-requises
Avant toute chose, les domaines suivants doivent vous être familiers:
Evènements du clavier
Voici la liste des évènements possible d'un clavier en javascript.
- onkeypress : lorsqu'une touche est activée
- onkeydown : lorsqu'une touche est enfoncée
- onkeyup : lorsqu'une touche est 'relevée'
Pour de plus amples renseignements sur les évènements et leur gestion, vous pouvez consulter la rubrique
javascript event
Il faut bien noter la différence entre, d'une part 'onkeypress', et d'autre part 'onkeydown' et 'onkeyup' ! 'onkeypress' sera appelée deux fois lorsque vous appuierez sur une touche : lorsque la touche est pressée, puis revelée. Donc si vous attribuez un comportement / traitement à cet évènement, prenez en compte qu'il sera effectué deux fois lorsque vous aurez appuyé sur votre touche. (A moins que vous contrôliez l'état de la touche (up ou down) directement dans le code javascript)
Attention cependant, tous les objets HTML ne comprennent pas ces fonctions de type écouteur, pour cela, renseignés vous sur le net avant de vous plonger dans votre code. (La liste est également fournie dans la rubrique
javascript event
L'objet 'event' Javascript
Une fois un écouteur placé, il vous reste à définir le ou les traitements attribué(s) à l'évènement. La plupart du temps, vous souhaiterez pouvoir contrôler la source de l'évènement car, certes, avec l'évènement vous savez qu'il s'agit d'un évènement clavier, mais en aucun cas quelle touche exactement a été activée.
L'objet 'event' en Javascript est là pour ça. Il s'agit d'un objet qui regroupe les principales informations du clavier et de la souris. Vous pouvez facilement obtenir la description de cet objet sur internet, via google et les mots clés suivants : 'javascript objet event'.
Pour ce qui est des contrôles clavier, nous nous intéresserons plus particulièrement aux trois propriétés suivantes :
- keyCode : code numérique de la touche clavier activée
- altKey : booléen vrai si la touche ALT est activée
- ctrlKey : booléen vrai si la touche CRTL est activée
En Javascript, l'objet 'event' n'est pas implémenté de la même manière d'un navigateur à un autre. Il est donc important de pouvoir distinguer les différents cas possibles, et récupérer de manière "universelle" cet objet.
- Internet Explorer : window.event
- Autre : par l'intermédiaire d'une variable 'event' passée automatiquement par le navigateur lorsqu'un évènement à lieu. Cette variable doit être incluse en tant que paramètre de vos fonctions de traitement. (voir exemple final)
Propriété keyCode et liste des valeurs
Cette propriété permet de récupérer la valeur entière de la touche activée. Il s'agit donc d'un chiffre.
Voici la liste des valeurs des touches les plus courantes :
KEY_DOWN = 40;
KEY_UP = 38;
KEY_LEFT = 37;
KEY_RIGHT = 39;
KEY_END = 35;
KEY_BEGIN = 36;
KEY_BACK_TAB = 8;
KEY_TAB = 9;
KEY_SH_TAB = 16;
KEY_ENTER = 13;
KEY_ESC = 27;
KEY_SPACE = 32;
KEY_DEL = 46;
KEY_A = 65;
KEY_B = 66;
KEY_C = 67;
KEY_D = 68;
KEY_E = 69;
KEY_F = 70;
KEY_G = 71;
KEY_H = 72;
KEY_I = 73;
KEY_J = 74;
KEY_K = 75;
KEY_L = 76;
KEY_M = 77;
KEY_N = 78;
KEY_O = 79;
KEY_P = 80;
KEY_Q = 81;
KEY_R = 82;
KEY_S = 83;
KEY_T = 84;
KEY_U = 85;
KEY_V = 86;
KEY_W = 87;
KEY_X = 88;
KEY_Y = 89;
KEY_Z = 90;
KEY_PF1 = 112;
KEY_PF2 = 113;
KEY_PF3 = 114;
KEY_PF4 = 115;
KEY_PF5 = 116;
KEY_PF6 = 117;
KEY_PF7 = 118;
KEY_PF8 = 119;
Propriétés 'altKey' et 'ctrlKey'
Ces deux propriétés sont des booléens, qui signalerons si les touches 'ALT' ou 'CTRL' sont actives ou non.
Exemple : écouter les flèches directionnelles sur une page
Voici un exemple complet sur l'implémentation d'une écoute de clavier sur une page web.
Page web
Voici le code d'une page web volontairement simple.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="keyboard.js"></SCRIPT>
</HEAD>
<BODY>
<script language="javascript">
document.onkeydown = applyKey;
</script>
</BODY>
</HTML>
Le fichier de script 'keyboard.js' inclut dans la page sera détaillé au
paragraphe suivant.
Ici nous nous intéresserons plus à la partie en gras. Elle permet d'
appliquer la fonction javascript 'applyKey' (définie dans le fichier de script) à l'évènement 'onkeydown', lui même appliquer sur l'objet 'document', ce qui signifie la page courante entière.
Les fonctions Javascript
Voici, fonction par fonction, le code du fichier 'keyboard.js'. Le contenu intégral est donné plus bas dans la section
Annexes.
Fonction applyKey
function applyKey (_event_){
// --- Retrieve event object from current web explorer
var winObj = checkEventObj(_event_);
var intKeyCode = winObj.keyCode;
var intAltKey = winObj.altKey;
var intCtrlKey = winObj.ctrlKey;
// 1° --- Access with [ALT/CTRL+Key]
if (intAltKey || intCtrlKey) {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello with ALT/CTRL !");
// 3° --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
// 2 ° --- Access without [ALT/CTRL+Key]
else {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello !");
// 3° --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
}
Il s'agit de la fonction la plus complexe. Décortiquons la pas à pas.
- Dans un premier temps, il s'agit de récupérer l'objet 'event' selon le type de navigateur.
Pour cela, nous invoquons la fonction 'checkEventObj' dont le code est donné
plus bas.
- Puis nous récupérons les valeurs des propriétés 'keyCode', 'altKey' et 'ctrlKey' de cet objet 'event' et les stockons dans des variables locales.
- Ensuite nous distinguons les cas que nous souhaitons. Dans cet exemple, plusieurs contrôles sont effectués pour séparer les cas où :
- La touche 'ALT' ou 'CTRL' est activée (CAS 1°)
- La touche 'ALT' ou 'CTRL' n'est pas activée (Cas 2°)
- Et enfin, nous appliquons un traitement dans le cas où seules les touches 'KEY_RIGHT' et 'KEY_LEFT' sont activée (respectivement flèche droite et flèche gauche du clavier). Ces deux valeurs correspondent à celles définies dans la liste des valeurs numériques des touches d'un clavier standard.
- Pour finir (En 3°), vous pouvez voir qu'après le traitement spécifique de chaque touche (un message d'alerte), nous effectuons un mapping de ces touches.Cette partie est très importante. Lorsque vous interceptez de cette façon un évènement clavier, il faut ensuite l'inhiber pour la raison suivante : les navigateurs définissent des comportements par défaut sur certaines touches dans vos pages. Si vous ne faites pas de redirection, ces actions seront déclenchées à la suite des votre, ce qui peut avoir des effets indésirables selon les touches et les navigateurs.
Fonction checkEventObj
Cette fonction, selon le type de navigateur, retourne l'objet 'event' approprié.
function checkEventObj ( _event_ ){
// --- IE explorer
if ( window.event )
return window.event;
// --- Netscape and other explorers
else
return _event_;
}
Annexes
Code complet fichier 'keyboard.js' :
KEY_DOWN = 40;
KEY_UP = 38;
KEY_LEFT = 37;
KEY_RIGHT = 39;
KEY_END = 35;
KEY_BEGIN = 36;
KEY_BACK_TAB = 8;
KEY_TAB = 9;
KEY_SH_TAB = 16;
KEY_ENTER = 13;
KEY_ESC = 27;
KEY_SPACE = 32;
KEY_DEL = 46;
KEY_A = 65;
KEY_B = 66;
KEY_C = 67;
KEY_D = 68;
KEY_E = 69;
KEY_F = 70;
KEY_G = 71;
KEY_H = 72;
KEY_I = 73;
KEY_J = 74;
KEY_K = 75;
KEY_L = 76;
KEY_M = 77;
KEY_N = 78;
KEY_O = 79;
KEY_P = 80;
KEY_Q = 81;
KEY_R = 82;
KEY_S = 83;
KEY_T = 84;
KEY_U = 85;
KEY_V = 86;
KEY_W = 87;
KEY_X = 88;
KEY_Y = 89;
KEY_Z = 90;
KEY_PF1 = 112;
KEY_PF2 = 113;
KEY_PF3 = 114;
KEY_PF4 = 115;
KEY_PF5 = 116;
KEY_PF6 = 117;
KEY_PF7 = 118;
KEY_PF8 = 119;
REMAP_KEY_T = 5019;
function checkEventObj ( _event_ ){
// --- IE explorer
if ( window.event )
return window.event;
// --- Netscape and other explorers
else
return _event_;
}
function applyKey (_event_){
// --- Retrieve event object from current web explorer
var winObj = checkEventObj(_event_);
var intKeyCode = winObj.keyCode;
var intAltKey = winObj.altKey;
var intCtrlKey = winObj.ctrlKey;
// --- Access with [ALT/CTRL+Key]
if (intAltKey || intCtrlKey) {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello with ALT/CTRL !");
// --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
// --- Access without [ALT/CTRL+Key]
else {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello !");
// --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
}
Alert javascript
