Evènements (blur, click, keypress) mélangés sous IE

**t.delclite** · 29/08/2011, 15h44

Bonjour,

J'ai besoin pour un programme d'évènements sur des case de formulaires : focus, keypress, keydown et blur.

Le problème est (classique...) que IE ne prends pas bien en charge ces évènements. J'ai voulu régler le problème par la fonction attachEvent, mais rien n'y fait. En fait, les évènements fonctionnent bien, mais pas dans le bon ordre...

Voici mon code :

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
 
<!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>
        <title>Expérience</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post" action="test.php" >
	<input id="case1" type="text" name="ind_nom" />
	<input  class="submit" id="submit" type="submit" value="Valider"/>
</form>
 
<script language="Javascript" type="text/javascript">
 
var e1 = document.getElementById('case1');	
 
if (e1.addEventListener){e1.addEventListener('click',function(e){alert('test1')},false);}
else if (e1.attachEvent){e1.attachEvent('onclick',function(e){alert('test1 IE')},false);}
 
if (e1.addEventListener){e1.addEventListener('keypress',function(e){alert('test2')},false);} 
else if (e1.attachEvent){e1.attachEvent('onkeypress',function(e){alert('test2IE')},false);}
 
if (e1.addEventListener){e1.addEventListener('keydown',function(e){alert('test3')},false);}
else if (e1.attachEvent){e1.attachEvent('onkeydown',function(e){alert('test3IE')},false);}
 
if (e1.addEventListener){e1.addEventListener('blur',function(e){alert('test4')},false);}
else if (e1.attachEvent){e1.attachEvent('onblur',function(e){alert('test4IE')},false);}
</script>
 
</body>
</html>

Sous Chrome, lorsque je clique sur la case, j'ai "test1". Puis, quand je tape un caractère, j'ai "test3" puis "test2" (je pensais que ça serait le contraire, mais ça n'est pas génant). Puis, quand je quitte la case, j'ai "test4".

Mais avec IE, quand je tape un caractère, j'ai "test4", "test3", "test2", "test1" qui s'affichent à la suite.
Comment cela se fait-il que taper un caractère entraine l'action "blur" ?

Savez vous comment trouver une parade à ce problème ?

Merci d'avance

**t.delclite** · 29/08/2011, 15h48

Je viens de me rendre compte que mon code est plutôt foireux. J'ai réunis les if pour simplifier la lecture, mais ça ne change rien au résultat

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
 
 
<!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>
        <title>Expérience</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
 
<body>
<form method="post" action="test.php" >
	<input id="case1" type="textarea" name="ind_nom" />
	<input  class="submit" id="submit" type="submit" value="Valider"/>
</form>
 
<script language="Javascript" type="text/javascript">
 
var e1 = document.getElementById('case1');	
 
if (e1.addEventListener){
e1.addEventListener('click',function(e){alert('test1')},false);
e1.addEventListener('keypress',function(e){alert('test2')},false);
e1.addEventListener('keydown',function(e){alert('test3')},false);
e1.addEventListener('blur',function(e){alert('test4')},false);
}
else if (e1.attachEvent){e1.attachEvent('onclick',function(e){alert('test1 IE')},false);
e1.attachEvent('onkeypress',function(e){alert('test2IE')},false);
e1.attachEvent('onkeydown',function(e){alert('test3IE')},false);
e1.attachEvent('onblur',function(e){alert('test4IE')},false);
}
 
</script>
 
</body>
</html>

**Bovino** · 29/08/2011, 15h52

quand je tape un caractère, j'ai "test3" puis "test2"

C'est tout à fait normal que le keydown (touche enfoncée) soit déclenché avant le keypress (appui d'une touche).

Comment cela se fait-il que taper un caractère entraine l'action "blur" ?

Ce n'est pas l'appui d'une touche qui entraine le blur mais l'affichage de l'alerte.
Tu devrais plutôt utiliser console.log() pour tester l'enchainement des caractères.

**t.delclite** · 29/08/2011, 16h24

Merci du conseil, je vais voir cela. (zut, ça veut dire que mon problème de code sur IE viendrait d'ailleurs, et je ne sais pas où... )

Par contre, comment tester facilement un site sous IE 6 ? (là j'ai IE9 sur mon PC)

J'ai installé le plugin IE tab de chrome, mais la console JS ne semble pas fonctionner avec ce plugin.

**t.delclite** · 29/08/2011, 16h33

Ok, je confirme que l'erreur est bien provoqué par le alert.
Je cherche donc toujours mon erreur, mais ce problème est résolu.
Merci !

Evènements (blur, click, keypress) mélangés sous IE

JavaScript

Discussions similaires

Partager

Partager