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:
à 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 :
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 :
et pour l utilisation un exemple:
Je veux que lors de l appuie sur 'a', on affiche le message "bonjour" :
ou encore je veux désactiver les touches F1 à F5 et afficher le message "inactif":
si y a des questions ou propositions, n hésitez pas.
naga
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
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.