JS catch key

Contenu du snippet

Salut à tous,

Dans le cadre d un projet se site pilotable uniquement par clavier, j'ai fais ce petit code pour catcher les touches qui m'interessaient et pouvoir paramétrer simplement mes traitements en fonction des touches.

Le principe est pas très compliqué, on a un tableau associatif dans lequel on associe le key code à une procédure.

J'ai surtout galéré pour stoper les évenements standard (type f1,f2, etc.).

Donc en premier lieux, gérer l'event keydown et le tableau associatif:


var assocEv = new Object(); 
setKeyEvent = function(keyCode , fName){ 
	assocEv[keyCode] = fName;
};	


document.onkeydown = function (e) { 
	if( !e ) e = window.event
	var kCode = e.keyCode;					
	if( assocEv[kCode] ) {
		assocEv[kCode](e);
	}
};


à l event keyDown, on va simplement regarder si on a un procédure à appeler.

Pour ce qui est des event standard, ma procédure pour annuler l action par défaut est :

function cancelDefaultAction(e){
	if( !e ) e = window.event
	if(e.cancelBubble != undefined) e.cancelBubble = true;
	e.returnValue=false;
	e.keyCode = 0;	
	if(e.preventDefault != undefined) e.preventDefault();
};


D'après ce que j ai pu voir, normalement le "preventDefault" suffit pour chrome et firefox, et cancelBubble est pour ie.
Mais je n ai jamais réussi en utilisant seulement l un ou l autre (en fonction du navigateur) à arrêter l evenement, le return value à false est obligatoire a prioris. Pour le keyCode, obligatoire sur ie seulement (d après mes tests) mais vu qu on ne veut pas propager, ca coute rien de le mettre à 0.
aussi, pour le cas particulier de f1, si vous voulez ne pas afficher l aide ajoutez simple :

window.onhelp =function() {return false;};



et pour l utilisation un exemple:
Je veux que lors de l appuie sur 'a', on affiche le message "bonjour" :

setKeyEvent(65,function (e) { 
	alert('bonjour'); 
});


ou encore je veux désactiver les touches F1 à F5 et afficher le message "inactif":
prevent = function(e){ 
    cancelDefaultAction(e);
    alert('inactif');
};
for(i = 112 ; i <= 116 ; i++){
    setKeyEvent(i,prevent);
}


si y a des questions ou propositions, n hésitez pas.

naga

Compatibilité : 1

A voir également