désactivation de touche tab

**jeepibmx** · 18/09/2008, 16h57

Bonjour, j'ai un souci et je vous l'explique:

J'ai un input text qui permet d'entrer un courriel.

Code :

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

1
2
 
<input name="txtCourriel" type="text" size="20" maxlength="50"  onblur="if (verifCourriel() != false){ChangeClass(this,'oblCourriel')};" >

La function verifCourriel permet de vérifier si le courriel est valide.

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
 
function verifCourriel(){
     var regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
<!-- Regex pour valider un e-mail -->
     var result = true;
     if (document.forms['formulaire'].elements['txtCourriel'].value != ''){
          champ = document.forms['formulaire'].elements['txtCourriel'].value;
    	  if (!regex.test(champ)){
    	       document.forms['formulaire'].elements['txtCourriel'].value = '';
      	       alert('Veuillez choisir un courriel valide.');
      	       document.forms['formulaire'].elements['txtCourriel'].focus();
      	       result =  false;
    	 }
     }
     return result;
}

Le problème :
Quand un utilisateur entre sont e-mail, appui sur TAB pour changer de case et que l'adresse e-mail n'est pas valide, le focus change quand même de case.

**le_chomeur** · 18/09/2008, 16h59

dans ce cas ajoute onblur = perd le focus

puis une méthode vérifiant le mail , si le mail n'est pas bon , redonne le focus a ce champs

**jeepibmx** · 18/09/2008, 17h02

exactement ce que je fais ??

**le_chomeur** · 18/09/2008, 17h10

excuse moi un peu fatigué ^^

voila ce que j'ai testé et qui fonctionne :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function verifCourriel(){
     var regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
<!-- Regex pour valider un e-mail -->
     var result = true;
     if (document.forms['formulaire'].elements['txtCourriel'].value != ''){
          champ = document.forms['formulaire'].elements['txtCourriel'].value;
    	  if (!regex.test(champ)){
    	       document.forms['formulaire'].elements['txtCourriel'].value = '';
      	       //alert('Veuillez choisir un courriel valide.');
      	       document.forms['formulaire'].elements['txtCourriel'].focus();
      	       result =  false;
    	 }
     }
     return result;
}
 
</script>
</head>
 
<body>
<form name="formulaire">
<input name="txtCourriel" type="text" size="20" maxlength="50"  onblur="if (verifCourriel() != false){ChangeClass(this,'oblCourriel');}" >
<input type="text" onfocus="document.forms['formulaire'].elements['txtCourriel'].focus();" />
</form>
</body>
</html>

pas eu le temps de creuser pourquoi le focus(); ne marche pas mais je pense qu'il s'agit de l'ordre de propagation des évènements . . .
donc en lui redonnant le focus a partir d'un autre champs ça marche

**jeepibmx** · 18/09/2008, 17h16

ça fonctionne si l'adresse est invalide mais quand elle est valide le tab ne fonctionne pas??

**bigboomshakala** · 18/09/2008, 17h44

Envoyé par le_chomeur

pas eu le temps de creuser pourquoi le focus(); ne marche pas mais je pense qu'il s'agit de l'ordre de propagation des évènements . . .
donc en lui redonnant le focus a partir d'un autre champs ça marche

pour moi ça marche bien sous IE6 et Opera (mais sous FF le focus n'est pas rendu sur le champ mail en cas d'erreur)

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function verifCourriel(){
     var regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
<!-- Regex pour valider un e-mail -->
     var result = true;
     if (document.forms['formulaire'].elements['txtCourriel'].value != ''){
          champ = document.forms['formulaire'].elements['txtCourriel'].value;
    	  if (!regex.test(champ)){
    	       document.forms['formulaire'].elements['txtCourriel'].value = '';
      	       document.forms['formulaire'].elements['txtCourriel'].focus();
      	       result =  false;
    	 }
     }
     return result;
}
 
 function ChangeClass(o,css)
 {
  o.className = css;
 }
 
</script>
<style>
  .oblCourriel
  {
    color : green;
  }
</style>
</head>
 
<body>
<form name="formulaire">
<input name="txtCourriel" type="text" size="20" maxlength="50"  onblur="if (verifCourriel() != false){ChangeClass(this,'oblCourriel');}" >
<input type="text" />
</form>
</body>
</html>

**jeepibmx** · 18/09/2008, 17h52

aarrrrggg

si seulement sa pourrais fonctionner avec FF

merci de la réponse

**jeepibmx** · 18/09/2008, 19h33

Il ne serais pas plus simple de faire quelque chose du genre :

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
 
<input name="txtCourriel" type="text" size="20" maxlength="50" onkeypress="refuserToucheEntree(event);" >
 
 
function refuserToucheEntree(event){
    // Compatibilité IE / Firefox
    if(!event && window.event) {
        event = window.event;
    }
    // IE
    if(event.keyCode == 9) {				
        event.returnValue = false;
        event.cancelBubble = true;
    }
    // DOM
    if(event.which == 9) {
        event.preventDefault();
        event.stopPropagation();
    }
}

Marche pas avec IE

**le_chomeur** · 19/09/2008, 09h17

bonjour

bon aujourd'hui ça va mieux ( hier je m'excuse je t'ai donné des moitiés de réponse . . . )

je cherche encore pourquoi en donnant le focus au champs a partir d'une méthode cela ne marche pas alors que comme vu dans l'exemple que j'ai donné , en le donnant directement sur un onfocus d'un autre élément cela fonctionne . . . je cherche je cherche

désactivation de touche tab

JavaScript

Discussions similaires

Partager

Partager