Je ne peux pas positionner le focus sur un champ [Résolu]

karno · 06/12/2010, 13h41

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 :

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

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 :

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

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

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

scourjean · 06/12/2010, 16h18

Essaye plutôt :

Code :

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

$(this).focus();

karno · 06/12/2010, 16h24

Citation:

Envoyé par scourjean

Essaye plutôt :

Code :

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

$(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

danielhagnoul · 11/12/2010, 21h30

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 :

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
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>

06/12/2010, 16h18	#2
scourjean Membre éclairé sébastien courjean Inscription : novembre 2010 Messages : 204 Détails du profil Informations personnelles : Nom : sébastien courjean Localisation : France, Indre et Loire (Centre) Informations forums : Inscription : novembre 2010 Messages : 204 Points : 319 Points : 319	Essaye plutôt : Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).focus(); __________________ Sébastien Courjean Développeur Web scourjean@cyres.fr http://www.cyres.fr/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email