event tab non détecté sur iE

**ekremyilmaz** · 05/01/2011, 22h36

Bonjour,
j'ai un petit souci.
J'aimerai détecter l'event keycode = 9 (tab).
Sur FF, ça fonctionne bien mais sur IE, il ne le détecte pas.

Voici un cas de test hyper simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 
<input id="sscc1" name="sscc" type="text" onkeypress="if (event.keyCode == 9) alert('ici')"/><br/>

Sur FF, il affiche l'alert et sur IE, non :s.

Avez-vous une idée ?

**ekremyilmaz** · 05/01/2011, 22h41

avec onkeydown, ça roule :-)

**ekremyilmaz** · 05/01/2011, 23h35

par contre, j'ai un autre petit souci, et en faisant des recherches, rien de concluant.

Avant tout, je vous explique le besoin du client.

J'ai plusieurs champs de type input...

Le client aimerait que lorsque l'utilisateur appuie sur la touche tab ou scanne un colis à l'aide d'une douchette, le curseur se positionne automatiquement sur le champs suivant...

Bien évidemment, ce n'est pas si simple que ça, c'est que les champs de type <input type="text" id="sscc"/> ne sont pas dans l'ordre, ils peuvent être dispersé.

Donc pour la touche TAB, ça fonctionne parfaitement... par contre je ne sais pas s'il est possible de détecter la douchette......

Qu'en pensez-vous ?

voici mon code (pas le code de l'application) mais un exemple de test que j'essaie de produire...
vous pouvez copier/coller et tester...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Insertion de contenu dans un champ de saisie à plusieurs lignes</title>
<script type="text/javascript">
 
var keyCode;
 
 
<!--
function perteFocus(element) {
 
var id = element.id  ;
var form = document.getElementById("formulaire");
  for(i=0;i<form.length;i++){
    if (form.elements[i].type=="text" || form.elements[i].type=="textarea")
    var id1 = form.elements[i].id ;
    var ok = id1.lastIndexOf("sscc", 0 );
    if (ok != -1) {
      var idF = id1.substr (4,id1.length-4);
      var idF1 = id.substr (4,id1.length-4);
      if (idF > idF1) {
        document.getElementById(id1).focus();
        break;
      }
    } 
  }
}
 
function updateKeyCode(valeur) {
keycode = valeur;
}
 
function effacerkeycode() {
  updateKeyCode(0);
}
document.onclick=effacerkeycode;
//-->
</script>
</head>
<body>
 <form id="formulaire">
sscc1<input id="sscc1" name="sscc" type="text"  onkeydown="if(event.keyCode == 9){ updateKeyCode(9);} else {effacerkeycode()}" onblur="if (keycode == 9) {perteFocus(this);effacerkeycode()}"/><br/>
 
champ texte
<input name="champ" type="text"/><br/>
 
sscc20
<input id="sscc20" name="sscc" type="text" onkeydown="if(event.keyCode == 9){ updateKeyCode(9);} else {effacerkeycode()}" onblur="if (keycode == 9) {perteFocus(this);effacerkeycode()}"/><br/>
champ texte<input name="champ" type="text"/><br/>
 
sscc24
<input id="sscc24" name="sscc" type="text"  onkeydown="if(event.keyCode == 9){ updateKeyCode(9);} else {effacerkeycode()}" onblur="if (keycode == 9) {perteFocus(this);effacerkeycode()}" /><br/>
 
sscc28
<input id="sscc28" name="sscc" type="text" onkeydown="if(event.keyCode == 9){ updateKeyCode(9);} else {effacerkeycode()}" onblur="if (keycode == 9) {perteFocus(this);effacerkeycode()}"/><br/>
 
sscc30
<input id="sscc30" name="sscc" type="text" onkeydown="if(event.keyCode == 9){ updateKeyCode(9);} else {effacerkeycode()}" onblur="if (keycode == 9) {perteFocus(this);effacerkeycode()}"/><br/>
champ texte<input name="champ" type="text"/><br/>
 
sscc33
<input id="sscc33" name="sscc" type="text" onkeydown="if(event.keyCode == 9){ updateKeyCode(9);} else {effacerkeycode()}" onblur="if (keycode == 9) {perteFocus(this);effacerkeycode()}"/><br/>
 
</form>
</body>
</html>

**nault** · 06/01/2011, 19h08

Si je comprend bien ce que tu vx faire,

cest que si le client rentre a la main le code bar, rendu au 8e chiffre ca fait un focus sur le champs suivant

et

que si il scann, une foi le champ rempli, bien ca fait un focus aussi sur le prochain champs.

La problematique que tu rencontre est donc que tu ne sait pas comment detecter avec js levenement ex :onCopierDepuisLaDouchette() c ca?

ma solution serait de creer une sorte de Observer

quand un input text serait focus, il declancherais lobserver qui a chaque x interval, regarderait sont value,

si on click ailleur , lobserver arrete et sefface
si il detecte 8 champ dans le input text, il sarrete et seface et fait le focus sur le champ suivant.

**ekremyilmaz** · 08/01/2011, 13h06

En fait, j'ai appris cette semaine, qu'on pouvait programmer la douchette.
C'est à dire que la douchette scanne le code barre et simule la touche "Entrée".

Donc dans mon code, j'ai rajouté la touche tab & entrée.

En gros, suite à l'appui sur la touche tab ou entrée, on passe au champ suivant

et là c nikel :-) !!!

event tab non détecté sur iE

JavaScript

Discussions similaires

Partager

Partager