onmouseover + raccourci clavier

Version imprimable

Bonjour à tous,

Sur mon site (php/MySQL/javascript) j'ai un menu issue de ma base de données.

Dans cette base une table "menu" dans laquelle j'ai le libellé du menu (par exemple Acceuil) et un raccourci clavier (par exemple 1).

J'affiche le menu sans problème avec dessus des onmouverover, onmouseout pour gérer les styles (style plus foncé sur onmouseover qui revient plus clair sur onmouseout), par contre je ne sais pas comment insérer les raccourcis clavier dans cette syntaxe...

Ca me donne par exemple:
Code:

1 2 3 4 5 6 7 8 <div class="textenav boites" onmouseover="this.className='etat1 textenav';" onmouseout="this.className='etat2 textenav';" <?php echo "onclick=\"document.location.href='http://main.php?page=$menu[nom_menu]&url=$menu[url]>$menu[nom_menu]"; echo "</div>";
Pouvez-vous m'aider?

Merci d'avance.

Code:

1
2
3
4
5
6
// JavaScript
document.onkeypress=function(e) {
   if (e.keyCode==32) {
      alert('vous avez tapé un "'
   }
}

27/06/2006, 16h17
xave

Merci :D

Peux-tu m'expliquer ce qu'est cette fonction(e) et comment insérer ce script dans mon code (désolée, je suis très mauvaise en javascript :oops: )?

connais pas bien PHP mais voila un exemple bidon et qui respecte pas les conventions HTML:
Code:

1 2 3 4 5 6 7 8 9 10 <html><body><?php echo ("<script type=\"text/javascript\">") echo ("// JavaScript document.onkeypress=function(e) { if (e.keyCode==32) { alert('vous avez tapé un \"') } }") echo ("</script>") ?></body><html>
Aussi un petit truc pour t'aider :

Code:

if (String.fromCharCode(e.keyCode) == '"')

était bon aussi

27/06/2006, 16h25
xave

Hum... oui, si je comprend bien, cette fonction va me retourner ce qui est saisi au clavier...

Reste ensuite à faire le redirection en fonction du caractère saisi...
Et donc vu la structure de mon site passer la variable de javascript à php, ce qui je crois n'est pas faisable...

Et on ne peut pas utiliser accesskey ici?:P

[Edit]
C'est quoi cette fonction e que tu me mets dans chaque exemple?
[/Edit]
27/06/2006, 16h30
FremyCompany

CONTENU DE E == EVENT
-------------------------

Citation:

Pour Netscape :
-------------------
data retourne un tableau de chaînes de caractères contenant les URL des objets déposés avec l'événement Drag and Drop.
height représente la hauteur de la fenêtre ou du cadre.
layerX représente la coordonnée X au sein d'un calque (Layer).
layerY représente la coordonnée Y au sein d'un calque (Layer).
modifiers chaîne de caractères spécifiant la modification de clés associée à un événement de souris ou de clavier. Les valeurs sont : ALT_MASK, CONTROL_MASK, SHIFT_MASK, and META_MASK.
pageX nombre spécifiant la position horizontale du curseur en pixels par rapport à la page.
pageY nombre spécifiant la position verticale du curseur en pixels par rapport à la page.
target chaîne de caractères représentant l'objet sur lequel l'événement a eu lieu.
which nombre spécifiant quel bouton de souris a été pressé ou la valeur ASCII d'une touche de clavier pressée.
width représente la largeur de la fenêtre ou du cadre.

Pour Explorer :
-------------------
altKey détermine si la touche Alt était pressée lors de l'événement.
button détermine le bouton de la souris pressée lors de l'événement.
cancelBubble arrête la propagation de l'événement.
clientX nombre spécifiant la position horizontale du curseur en pixels par rapport à la page.
clientY nombre spécifiant la position verticale du curseur en pixels par rapport à la page.
ctrlKey détermine si la touche Ctrl était pressée lors de l'événement.
fromElement représente l'objet source d'un déplacement de la souris.
keyCode détermine l'encodage Unicode de la touche pressée.
offsetX coordonnée horizontale de l'événement en position relative par rapport au conteneur.
offsetY coordonnée verticale de l'événement en position relative par rapport au conteneur.
reason représente l'état d'un transfert de données.
returnValue indique la valeur de retour pour le gestionnaire d'événement.
shiftKey détermine si la touche Shift était pressée lors de l'événement.
srcElement indique l'objet sur lequel l'événement s'est produit.
srcFilter indique le filtre qui a changé.
toElement indique l'objet de destination d'un déplacement de souris.

Commun :
-------------------
screenX nombre spécifiant la position horizontale du curseur en pixels par rapport à l'écran.
screenY nombre spécifiant la position verticale du curseur en pixels par rapport à l'écran.
type chaîne de caratères représentant le type de l'événement.
x identique à layerX.
y identique à layerY.

FremyCompany: je n'arrive pas à faire fonctionner ton bout de code, voilà ce que j'ai fait:
Code:

1 2 3 4 5 6 7 8 echo "<script language='javascript'>"; echo "document.onkeypress=function(e) { if (e.keyCode==1) { alert('vous avez tapé un \"') } }"; echo "</script>";
Mais il ne se passe rien... :oops:

lol, c'est normal...
le caractère ASCII (1) étant un caractère de controle, tu ne sais pas le taper avec ton clavier...
si tu veux faire des tests :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossble de lire le caractère...
   }
   if (Code) {
      alert(Code + " : " + String.fromCharCode(Code));
   }
}

27/06/2006, 17h28
xave

J'obtiens l'erreur suivante:

Citation:

'keyCode' a la valeur nulle ou n'est pas un objet

J'ai testé, mais ça ne fonctionne pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<body>
<script type=\"text/javascript\">
document.onkeypress = function(e)
{
   alert('');   //  <---
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossble de lire le caractère...
   }
   if (Code) {
      alert(Code + " : " + String.fromCharCode(Code));
   }
}
</script>
 
<table border=1>
   <td><div>Accueil</div></td>
   <td><div>Menu 2</div></td>
</table>
 
<?php
 
?>
</body>
</html>

J'ai mis un alert pour voir si la fonction est appellée, mais je n'obtiens rien.

:koi:

27/06/2006, 18h00
FremyCompany

Code:

<script type=\"text/javascript\">

Que viennent faire ces "\" la ???
28/06/2006, 08h24
xave

Fremycompany>> je pense que Lung c'est inspiré de ton post de 16h22 :roll:

En attendant chez moi non plus ça ne fonctionne pas :?
28/06/2006, 09h31
Lung

Citation:

Envoyé par FremyCompany

Code:

<script type=\"text/javascript\">

Que viennent faire ces "\" la ???

Tu as raison : ca marche !!

;)
28/06/2006, 09h35
xave

Oui, ça y est chez moi aussi mais je vois toujours pas comment l'intégrer dans mon code...:?
28/06/2006, 10h22
FremyCompany

Bien, cette étape-la passée, que veux-tu faire exactement ?
En gros : Quelle(s) touche(s) pour quoi faire :)
Maintenant, il va falloir jongler avec les possibilités qu'on a.
28/06/2006, 10h24
xave

Merci Fremy :D

En gros je veux que quand l'utilisateur tape 1 par exemple, ça le redirige directement sur la page dont le raccourcis clavier est 1.

Sachant que mes liens sont un peu particulier puisque j'utilise des include de page, donc en gros quand on tape 1, ça renvoie par exemple sur index.php?lien=accueil

Code nécéssaire pour le fonctionnement : statique :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossble de lire le caractère...
   }
   if (Code) {
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
}

Code de gestion de l'évenement : statique :

Code:

1
2
3
4
5
6
7
 
window.KeyEvent=function(Code) {
   var Char = String.fromCharCode(Code)
   if (Links[Char]) {
      window.location.href="index.php?lien=" + escape(Links[Char])
   }
}

Code de données : Dynamique (PHP)

Code:

1
2
3
4
5
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['1']='acceuil'
Links['2']='page 1'
// [...]

28/06/2006, 10h39
xave

Ah... merci Fremy, je vais essayer ça de suite!!!! :D

Ok, voilà ce que j'ai fait dans un premier temps pour faire simple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
document.onkeypress=function(e) {
	 alert('Test');
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.wich) {
         Code=e.wich
      }
   }
   else if (window.event.keyCode) {
      Code=window.event.keyCode
   }
   else if (window.event.wich) {
      Code=window.event.wich
   }
   else {
      // Impossible de lire le caractère...
	  alert("Impossible de lire le caractère");
   }
   if (Code) {
   	  //alert("Caractère lu: "+Code);	
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
}
 
window.KeyEvent=function(Code) {
   var Char = String.fromCharCode(Code)
   if (Links[Char]) {
      window.location.href=escape(Links[Char])
   }
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['1']='http://www.google.fr'
Links['2']='http://www.yahoo.fr'
// [...]
 
</script>

Quand je fais le raccourcis 1 par exemple, il affiche bien "Test" de l'alerte de début de fonction mais ensuite rien ne se passe...

Testé et OK sur IE & FF

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
document.onkeypress_error=false
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.which) {
         Code=e.which
      }
   }
   if (window.event  && (!Code)) {
	   if (window.event.keyCode) {
	      Code=window.event.keyCode
	   }
	   else if (window.event.which) {
	      Code=window.event.which
	   }
   }
   if (Code) {
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
   else {
      // Impossible de lire le caractère...
	  if (!document.onkeypress_error) {
		alert("Votre navigateur n'est pas compatible.");
		document.onkeypress_error=true;
	  }
   }
}
 
window.KeyEvent=function(Code) {
   var Char = String.fromCharCode(Code)
   if (Links[Char]) {
      window.location.href=(Links[Char]) 
   // Le escape sert à faire comme un url_encode de PHP, si tu mets des url complètes, il ne sert à rien
   }
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['1']='http://www.google.fr'
Links['2']='http://www.yahoo.fr'
// [...]
 
</script>

28/06/2006, 11h14
xave

YES!!!

Cette fois c'est bon!

Un grand grand merci Fremy, tu m'enlèves une sacré épine du pied!!!:mouarf:

Je l'adapte maintenant à mon code et je reviens mettre résolu quand j'ai fini.
28/06/2006, 16h25
xave

Ok, ça marche bien maintenant que je l'ai correctement adapté à mon code...:mouarf:

Un dernier point: dans certaines pages, j'ai des formulaires et du coup quand je veux saisir les champs de mon formulaire, il se comporte comme s'il s'agissait d'un raccourci clavier et essaie de me rediriger sur une page (inexistante).

Je ne peux donc plus remplir mes formulaires...:?

Aussi, comme j'ai un grand menu mes raccourcis clavier vont de 0 à 20, or, je n'ai pas le temps de taper le deuxième chiffre que le premier est déjà interprété et que je suis redirigée...

Comment résoudre ce problème?
28/06/2006, 16h56
FremyCompany

1/ Demander que ALT soit enfoncée pour démerer la redirection...
Comme ca quand on taprera 1 dans une boite de texte, si ALT n'est pas enfoncée, il n'y aura pas de problème.

2/ Si tu as des menus de supérieure à 9, utilise les lettes :)
('a','b','c','d','e', ...) : ca augmentera ton maximum à 35 (36 + 9)

Je vais améliorer le code et je reposte quand j'ai fini....
28/06/2006, 17h12
xave

Oui, ce serait parfait avec la touche ALT!

Et pour les lettres, en effet, ça me semble un bon compromis.

Merci Fremy :D

Seul changement : Les racourci se font avec 2 caractères obligatoirement.

J'ai essayé avec ALT mais il y avait des incompatibiliés navigateurs et certaines combinaisons étaients réservées (Alt + a : menu afficher)

CCL : Si tu tapes 01 dans tes forms ca va déclancher le changement de page tout de même...

Mais je planche sur une solution...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<body>
<script>
 
document.onkeypress_error=false
document.onkeypress=function(e) {
   var Code=false
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
      }
      else if (e.which) {
         Code=e.which
      }
   }
   if (window.event && (!Code)) {
	   if (window.event.keyCode) {
	      Code=window.event.keyCode
	   }
	   else if (window.event.which) {
	      Code=window.event.which
	   }
   }
   if (Code) {
      window.KeyEvent(Code) // Lance la gestion de l'evenement
   }
   else {
      // Impossible de lire le caractère...
	  if (!document.onkeypress_error) {
		alert("Votre navigateur n'est pas compatible.");
		document.onkeypress_error=true;
	  }
   }
   return true;
}
 
window.KeyEvent_Str=".."
window.KeyEvent=function(Code, Alt) {
   var Char = String.fromCharCode(Code)
   var OldChar = window.KeyEvent_Str.charAt(1)
   window.KeyEvent_Str = OldChar + Char
   if (Links[window.KeyEvent_Str]) {
      window.location.href=(Links[window.KeyEvent_Str]) 
   }
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['01']='http://www.google.fr'
Links['02']='http://www.yahoo.fr'
// [...]
 
</script>
</body>
<html>

Solution trouvée : Si le onkeypress provient d'un input, sa gestion est annulée...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<body>
<input type='texte' />
<script>
document.onkeypress_error=false
document.onkeypress=function(e) {
   var Code=false
   var Src=new Object()
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
		 Src=(e.srcElement)
      }
      else if (e.which) {
         Code=e.which
		 Src=(e.target)
      }
   }
   if (window.event && (!Code)) {
	   if (window.event.keyCode) {
	      Code=window.event.keyCode
		  Src=(window.event.srcElement)
	   }
	   else if (window.event.which) {
	      Code=window.event.which
		  Src=(window.event.target)
	   }
   }
   if (Code) {
      window.KeyEvent(Code, Src) // Lance la gestion de l'evenement
   }
   else {
      // Impossible de lire le caractère...
	  if (!document.onkeypress_error) {
		alert("Votre navigateur n'est pas totalement compatible avec ce site... Veuillez le mettre à jour.");
		document.onkeypress_error=true;
		return false;
	  }
   }
   return true;
}
 
window.KeyEvent_Str=".."
window.KeyEvent=function(Code, Src) {
   if (Src.tagName.toUpperCase()=="INPUT") {
      return false;
   }
   var Char = String.fromCharCode(Code)
   var OldChar = window.KeyEvent_Str.charAt(1)
   window.KeyEvent_Str = OldChar + Char
   if (Links[window.KeyEvent_Str]) {
      window.location.href=(Links[window.KeyEvent_Str]) 
   }
   return true;
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['01']='http://www.google.fr'
Links['02']='http://www.yahoo.fr'
// [...]
 
// PS :
// ...........................
// <a href="http://Links[&#39;YA&#39;]=&#39;http://www.yahoo.fr&#39;" target="_blank">Links['YA']='http://www.yahoo.fr'</a>
// Cela aussi est valable.
</script>
</body>
<html>

29/06/2006, 10h20
xave

Super Fremy, ça fonctionne impeccablement bien! :bravo: :lahola: :ccool:

Pile poil ce qu'il me fallait, encore une fois un grand MERCI!

Et si tu as un jour besoin d'un coup de main en php, n'hésite pas! :D
04/07/2006, 11h08
xave

Me revoilà... :P

Alors, maintenant j'aimerai si possible annuler la gestion du onkeypress uniquement pour les input de type texte... :roll:

Code:

1
2
3
4
5
6
7
8
var TabInputs=documents.getElementsByTagName('input')
var TabText= new Array()
 
for (i=0;i<TabInputs.length;i++){
             if (TabInputs[i].type.toUppercase()=='TEXT'){TabText.push(TabInputs[i])}
}
 
for (i=0;i<TabText.length;i++){TabText[i].onmouseover=function(){};}

Lol, merci SpaceFrog, mais je lui ai déjà adapté ma fonction par MP :)
(J'en ai d'ailleurs profité pour ajouter la gestion des TextArea que j'avais ajouté pour moi mais que j'avais omis de lui communiquer)

Pour le code final :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<body>
<input type='texte' />
<textarea></textarea>
<script>
document.onkeypress_error=false
document.onkeypress=function(e) {
   var Code=false
   var Src=new Object()
   if (e) {
      if (e.keyCode) {
         Code=e.keyCode
		 Src=(e.srcElement)
      }
      else if (e.which) {
         Code=e.which
		 Src=(e.target)
      }
   }
   if (window.event && (!Code)) {
	   if (window.event.keyCode) {
	      Code=window.event.keyCode
		  Src=(window.event.srcElement)
	   }
	   else if (window.event.which) {
	      Code=window.event.which
		  Src=(window.event.target)
	   }
   }
   if (Code) {
      window.KeyEvent(Code, Src) // Lance la gestion de l'evenement
   }
   else {
      // Impossible de lire le caractère...
	  if (!document.onkeypress_error) {
		alert("Votre navigateur n'est pas totalement compatible avec ce site... Veuillez le mettre à jour.");
		document.onkeypress_error=true;
		return false;
	  }
   }
   return true;
}
 
window.KeyEvent_Str=".."
window.KeyEvent=function(Code, Src) {
   if (Src.tagName.toUpperCase()=="TEXTAREA" || (
          Src.tagName.toUpperCase()=="INPUT" && (
	      Scr.getAttribute().toUpperCase() == null || 
          Scr.getAttribute().toUpperCase() == "" || 
          Scr.getAttribute().toUpperCase() == "TEXT"
         )
      )
   ) {
      return false;
   }
   var Char = String.fromCharCode(Code)
   var OldChar = window.KeyEvent_Str.charAt(1)
   window.KeyEvent_Str = OldChar + Char
   if (Links[window.KeyEvent_Str]) {
      window.location.href=(Links[window.KeyEvent_Str]) 
   }
   return true;
}
 
var Links=new Array(); // Obligatoire !!!
// Liste des raccourcis : A génerer par PHP
Links['01']='http://www.google.fr'
Links['02']='http://www.yahoo.fr'
// [...]
 
</script>
</body>
<html>

05/07/2006, 08h45
xave

C'est parfait! Un grand merci! :D