Je ne peux pas positionner le focus sur un champ

Version imprimable

Bonjour à tous,

Je suis débutant au niveau de JQuery, je passe peut être à coté d'un truc gros comme une baleine, mais je vois pas donc je vous explique.

Je dois, dans un formulaire, vérifier que le département saisi est bien un département breton, voici donc mon code.
Code:

1 2 3 <label class="saisieLabel" for="idDepInter1">Dép Intervention n°1</label> <input class="saisieChamp autoAdjust departement" rel="1" size="2" type="text" name="DPTINTVP1" id="idDepInter1" />
dans mon javascript cela donne
Code:

1 2 3 4 5 6 7 $('.departement').blur(function() { lesDepartementsLBR = '22,29,35,44,49,56'; if ((-1 == lesDepartementsLBR.indexOf($(this).attr('value'))) || ($(this).length != 2)) { alert('Le département saisi ne fait pas partie des départements '); $(this).attr('id').focus(); }
J'ai bien l'affichage du message, ouf .. mais plus rien.

Je lui ai demandé poliment d'afficher le $(this).attr('id') et j'obtiens bien idDepInter1 mais le focus passe au champ suivant. arghhhhh :aie:

Je teste pour l'instant sous FF mais je dois faire tourner ce script sous IE 7.

Merci pour vos lumières et ou pistes.

A plus

Karno

06/12/2010, 16h18
scourjean

Essaye plutôt :

Code:

$(this).focus();
06/12/2010, 16h24
karno

essai avec résultat infructueux

Citation:

Envoyé par scourjean

Essaye plutôt :

Code:

$(this).focus();

Merci pour ta proposition, je viens de la tester mais toujours pareil.

Petite précision, j'ai positionner le code JQuery sur le blur du champ possédant la classe département.
Voici le scénario qui fait que cela ne fonctionne pas. Lorsque je suis sur le champs département je saisie 53 (non breton) j'ai bien le message mais le focus arrive sur le champ suivant.

A plus

Karno

Bonsoir

Réagir lorsqu'un élément a le focus pas de problème, mais donner le focus à un élément donne rarement le résultat espérer, il vaut mieux attirer l'attention de l'utilisateur en modifiant l'aspect du contrôle. Exemple (voir les commentaires dans le code) :

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
74
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		.erreur {
			background-color:red;
			color:white;
			font-family:monospace;
			font-weight:bold;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<label class="saisieLabel" for="idDepInter1">Dép Intervention n°1</label>
<input id="idDepInter1" name="DPTINTVP1" class="saisieChamp autoAdjust departement" rel="1" size="2" type="text" value="" />
<br/>
<input type="text" value="test"/>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
/*
 * Réagir lorsqu'un élément a le
 * focus pas de problème, mais donner
 * le focus à un élément donne rarement
 * le résultat espérer.
 */
$("input").focus(function(){
	this.select();
});
 
$("input.departement").change(function(){
	var lesDepartementsLBR = ["22", "29", "35", "44", "49", "56"],
		obj = $(this),
		n = $.inArray(obj.val(), lesDepartementsLBR);
 
	// voir http://api.jquery.com/jQuery.inArray/
 
	if (n > -1){
		obj.removeClass("erreur");
	} else {
		alert("Le département saisi ne fait pas partie des départements ");
 
		// donner le focus ne donne pas le résultat escompté
		obj.val("--").focus();
 
		// il vaut mieux attirer l'attention de l'utilisateur
		obj.addClass("erreur");
	}
});
 
		});
 	</script>
</body>  
</html>