Exécution d'une fonction sur touche echap

Question

Hermann

2 Mar 2009 à 20:16

Bonjour,
comme il n'existe manifestement pas de gestionnaire d'évènement spécifique à la touche echap, je souhaiterais savoir comment exécuter une fonction lorsque l'on appuie sur Echap.

Heyoan

2 Mar 2009 à 20:28

Hello Hermann, Smiley smile

je dirais qu'il faut utiliser l'évènement onkeypress et récupérer le code de la touche saisie (je ne connais pas celui d'Echap mais ça doit se trouver dans Google...)

Hermann

2 Mar 2009 à 20:30

Heyoan a écrit :
Hello Hermann,

je dirais qu'il faut utiliser l'évènement onkeypress et récupérer le code de la touche saisie (je ne connais pas celui d'Echap mais ça doit se trouver dans Google...)

Salut Heyoan,
ok merci je vais regarder ça Smiley cligne

Modifié par Hermann (02 Mar 2009 - 20:45)

Jerome A

2 Mar 2009 à 20:47

Salut,

Le code de la touche ESC est 27, accessible depuis la propriété keyCode de l'objet event.

Ensuite, le champ d'application des événements clavier se limite aux éléments "focusables" et à document, difficile donc de lier ce type d'événement à un div.

Quel est le but exactement ?

Edit : c'est pas gentil d'éditer pendant qu'on répond Smiley lol

Modifié par jeje (02 Mar 2009 - 20:48)

Heyoan

2 Mar 2009 à 21:08

Sinon je viens de faire un test en suivant cet article.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Echap</title>
<script type="text/javascript">
<!--
function testEchap(e){
var keynum;
if(window.event) // IE
  {
  keynum = e.keyCode;
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which;
  }
//alert(keynum);
	if (keynum == 27) alert("Echap !");
}
// -->
</script>
  </head>
 <body onkeydown="testEchap(event)">
   <h1> Press the escape key </h1>
 </body>
 </html>

Mais je ne sais pas si on aura bien 27 quel que soit le navigateur...

PS: j'ai utilisé keydown plutôt que keypress après lecture de cet article.
Modifié par Heyoan (02 Mar 2009 - 21:18)

Jerome A

2 Mar 2009 à 21:41

a écrit :
je ne sais pas si on aura bien 27 quel que soit le navigateur...

Je ne vois pas de raisons pour que ce soit différent (code ascii)

a écrit :

else if(e.which) // Netscape/Firefox/Opera

FF et Opera actuels sont conformes avec le standard et fournissent bien la propriété keyCode.
e.which, ça doit être pour les antiquités.
D'ailleurs, avec ce test erroné, le code ne fonctionne pas avec Opera...

Heyoan

2 Mar 2009 à 21:47

Ah ben alors c'est cool. Smiley cligne

Hermann

2 Mar 2009 à 23:14

Bonsoir,

jeje a écrit :
Salut,
Ensuite, le champ d'application des événements clavier se limite aux éléments "focusables" et à document, difficile donc de lier ce type d'événement à un div.

Je le pensais aussi mais Firefox propage manifestement l'évènement onclick en exécutant la fonction lorsque l'on tape Enter, après je ne sais pas si c'est un comportement standard ou pas.

jeje a écrit :

Quel est le but exactement ?

Masquer une div via un display:none comme sur les lightbox et consors. J'ai d'ailleurs cherché ça dans slimbox mais impossible de trouver, trop compliqué pour moi.
Ça fait peur ce code Smiley rolleyes

jeje a écrit :

Edit : c'est pas gentil d'éditer pendant qu'on répond

Arf désolé Smiley confused

De toute façon j'avais pas trouvé la réponse Smiley cligne

Merci à toi!

@Heyoan Alors là tu me sauves Smiley smile

Moi qui trime pendant un moment pour écrire des fonctions simples... Smiley lol

Nickel merci!
Modifié par Hermann (02 Mar 2009 - 23:14)

Hermann

3 Mar 2009 à 11:41

Salut,
ça marche pas, mais il manquait le code pour désafficher le div
alors voila ce que j'ai maintenant (pas besoin de l'alert)

function testEchap(e) {
	var keynum;
	  if(event.keyCode==27) 
	  {
	keynum = e.keyCode;
	style.display = (style.display == "none") ? "" : "none";
	  }
	}

Modifié par Hermann (03 Mar 2009 - 11:43)

Jerome A

3 Mar 2009 à 13:53

Salut Hermann,

Pour la touche ENTER, c'est particulier, il génère un événement click sur les boutons et les liens.

Pour en revenir à ton cas, tu devras forcément affecter l'événement clavier à document. Ensuite :

- Si tu n'as qu'une div à masquer, c'est trivial, getElementById et modification du style.

- Si tu as plusieurs div mais un seul affiché à l'instant t, tu dois avoir un mécanisme pour savoir lequel est affiché. Si ce div est géré par un objet, les frameworks permettent via le bind de transmettre cet objet au listener lors de l'événement (ou de lier l'événement à une méthode de l'objet). Avec prototype.js, c'est du coté de bind et bindAsEventListener qu'il faut regarder, je ne connais pas les autres frameworks mais tu dois avoir les fonctions équivalentes.

Je passe sur le cas de plusieurs div affichées en même temps, ça n'a pas l'air d'être ton cas.

Bon courage Smiley cligne

J.

Jerome A

3 Mar 2009 à 14:53

Je t'ai préparé un petit script pour illustrer mon propos.
Evidemment j'avais zappé la remarque d'Heyoan donc ça ne fonctionnait pas avec onkeypress sur Safari Smiley rolleyes

Tu verras donc :

- une fonction $A pour transformer n'importe quelle collection (tout objet disposant d'une propriété length) en tableau (Array)

- une fonction bindAsEventListener pompée sans vergogne sur prototype.js. Elle permet de garder le contexte d'exécution d'un objet dans un listener (normalement, this représente l'objet html initiateur de l'événement, cette fonction permet à this d'être un objet perso)

- une fonction addEvent rudimentaire qui utilise les événements DOM2 et corrige le tir pour IE (pour qui this dans le listener n'est pas l'objet html)

Ensuite, c'est la partie exploitation. Au chargement de la page, j'initialise tout mon bouzin dans la fonction initEscape :

- Méthode 1 : j'ajoute un premier événement qui appellera escapeKey. Cette dernière masque le div ex1 déclaré en dur dans mon code html

- Méthode 2 : je crée 2 objets de type C (pour montrer que ça marche avec plusieurs objets), qui déclarent chacun un div. Chaque objet déclare ensuite son propre gestionnaire et l'ajoute à document. Le listener sera la méthode escapeKey de l'objet en question, ce qui me permet d'accéder directement au div que j'ai gardé en propriété de l'objet.

Voici donc le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">

<head>
    <title>Key event : ESC</title>
    <style type="text/css">
    * { font-family:verdana,sans-serif; }
    body { background-color:#f0f0f0; }
    div {
        background-color : #fec;
        border : 1px solid brown;
        position : absolute;
        width : 150px;
        height : 100px;
        top : 50px;
    }
    #ex1 {
        left : 50px;
    }
    #ex2 {
        left : 250px;
    }
    #ex3 {
        left : 450px;
    }
    </style>
<script type="text/javascript">
$A = function ( obj ) {
    var results = [];
    if (typeof obj.length != 'undefined')
        for (var ind = 0, l = obj.length; ind < l; ++ind)
            results.push(obj[ ind ]);
    return results;
};

Function.prototype.bindAsEventListener = function ( ) {
    var __method = this;
    var args = $A(arguments);
    var objet = args.shift();
    return function ( event ) {
        return __method.apply(objet, [(event || window.event)].concat(args).concat(arguments));
    };
};

function addEvent ( e, type, listener ) {
    if (e.addEventListener)
        e.addEventListener(type, listener, false);
    else if (e.attachEvent)
        e.attachEvent('on' + type, function () { return listener.apply(e, arguments); });
}

function escapeKey ( event ) {
    if (event.keyCode == 27) { // touche ESC
        document.getElementById('ex1').style.display = 'none';
    }
}

function initEscape ( ) {
    addEvent(document, 'keydown', escapeKey);
    new C('ex2');
    new C('ex3');
}

addEvent(window, 'load', initEscape);

var C = function ( id ) {
    this.div = document.createElement('div');
    this.div.id = id;
    this.div.appendChild(document.createTextNode('div ' + id));
    document.body.appendChild(this.div);
    this.escapeKey = function ( event ) {
        if (event.keyCode == 27)
            this.hide();
    }
    this.hide = function ( ) {
        this.div.style.display = 'none';
        this.div.style.visibility = 'hidden';
    }
    addEvent(document, 'keydown', this.escapeKey.bindAsEventListener(this));
}

</script>
</head>

<body>
    <div id="ex1">div ex1</div>
</body>

</html>

Je te laisse éplucher tout ça, dis-moi si ça correspond à ce que tu recherches.

a+
J.
Modifié par jeje (03 Mar 2009 - 14:59)

Hermann

3 Mar 2009 à 17:16

Bonjour Jeje,
merci de te pencher sur mon problème Smiley smile

Bon il y a pas mal de notions qui me perdent un peu mais
je vais essayer de récupérer une partie de ce code, je te tiens au jus.

Merci encore !

EDIT


function escapeKey (event) {
    if (event.keyCode == 27) { // touche ESC
		var style = document.getElementById(idDetail).style;
		style.display = (style.display == "none") ? "" : "none";
   }
}

Voila le code (le minimum nécessaire a priori) que j'ai mis (j'ai besoin d'une variable au niveau de l'ID car j'ai plusieurs div à afficher/masquer (pas de manière simultanée) dans le document.
Puis un onkeydown sur le div mais ça marche toujours pas. Smiley decu

Toujours pareil avec le JS, comme il me manque des bases essentielles
je me retrouve très vite bloqué Smiley ohwell

Modifié par Hermann (03 Mar 2009 - 18:00)

Jerome A

4 Mar 2009 à 00:03

Bonsoir,

Je t'avouerais qu'un peu plus de code ou une page en ligne, ça serait pas du luxe Smiley langue

Pour commencer, récupérer directement le style d'un élément dans une variable et modifier la variable, je n'avais jamais vu (crainte d'une copie et non d'une référence). Si ça marche, tant mieux. D'habitude, on récupère juste l'élément, et ensuite on modifie ses propriétés, ce qui permet en plus de tester l'existence de l'élément en question :

var e = document.getElementById(idDetail);
if(e) {
    e.style.display = ...;
}

Ensuite, il faudrait détailler ceci :

a écrit :
j'ai plusieurs div à afficher/masquer (pas de manière simultanée) dans le document

Si tu n'as qu'un seul div affiché à un instant t, pas de problème, tu les masques tous ! Ceux qui sont déjà masqués le resteront.

Si plusieurs sont affichés, il y a un problème : tu ne peux pas affecter un événement key* aux div. Dans mon code, j'ai bien affecté l'événement à document, donc tous les listeners liés à l'événement keydown seront exécutés, et tous les div sont masqués.
Il faudrait donc un mécanisme pour dire quel div est à masquer. C'est peut-être ce que fait ta variable idDetail qui n'est déclarée nulle part et que j'ose espérer globale.

Je ne m'avance pas plus, il faudrait des détails supplémentaires :
- comment sont créés les div ? (en dur en html, par script)
- quand sont-ils affichés/masqués et comment ? (grosso modo un scénario de ta page, pour savoir par exemple si 2 div peuvent être affichés au même moment mais qu'un seul disparaisse sur ESC)

a écrit :
Toujours pareil avec le JS, comme il me manque des bases essentielles
je me retrouve très vite bloqué

Et en plus ce langage est mal foutu, ça aide pas Smiley ohwell

(c'était la partie troll du topic, merci bonsoir !)

Sujet clos

JavaScript, DOM et API Web HTML5

Exécution d'une fonction sur touche echap