Javascript - Manipulation des contrôles clavier

Décembre 2016


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;
		}
		
	}
	
}

A voir également :

Ce document intitulé «  Javascript - Manipulation des contrôles clavier  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.