field.focus javascript avec iE7 et Chrome

Version imprimable

Bonjour
Quelqu'n a eu un probleme avec la fonction focus d 'un champ.

en gros ce que je dosi faire c'est lorsque mon champs est rempli au max il va au champs suivant mais le probleme c'est que j'ai un trois champ qui se suivent sans de libelle et ca me fait sauter deux champ .
Mais ce qui est bizarre c'est que ca marche sur firefox le focus marche tres bien.
il ya t il un moyen de prendre le focus avec l'argument (paramname ou ID).
Merci pour ceux qui lisent .
j envoie le code demain je ne suis pas au boulot :/

Code:

1
2
3
4
5
6
7
8
9
10
11
<s:textfield
					name="Jour"
					theme="perso" tabindex="5" id="dn_dd" maxlength="2" size="2" />
				/ <s:textfield
					name="Mois"
					theme="perso" tabindex="6" id="dn_mm" maxlength="2" size="2" />
				/ <s:textfield
					name="Annee"
					theme="perso" tabindex="7" id="dn_aaaa" maxlength="4"
					size="4" /> <span class="date-pattern">(JJ/MM/AAAA)</span>
			</li>

mon javascript:

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
$('#dn_dd, #dn_mm, #dn_aaaa').keyup(function(event) {nextFieldAtChar($(this), event.which);});
 
 
function nextFieldAtChar(field, key)
{
	// Récupérer la longueur max
	limit = field.attr('maxlength');
 
	// Si la touche TAB est activée, ne pas faire le contrôle pour éviter les
	// pièges aux claviers
	if(key == 9 || key == 16)
		return true;
 
	// Calculer la longueur de la saisie
	longeur = field.val().length;
	if (field.id!="dn_jj" || field.id!="dn_mm")
	{
	// Répérer le champ suivant
	next = field.next('input').eq(0);alert("next suivant:"+field.val());	
	if( ! next.length){
		next = field.parent().next().find('input').eq(0);
	alert("next1:"+field.val());	
	}
	if( ! next.length)
	{	next = field.parent().next().next().find('input').eq(0);
	alert("next2:"+field.val());
	}
	// Une fois la limite atteinte, déplacer le focus
	if(next.length && longeur >= limit)
		{
		var toto=next.focus();
		alert("next3:"+field.val()+" "+toto);
		}
	}
	else{
		if(field.id=="dn_jj"){
		next=${'#dn_mm'};
		else{}
 
	}}
}

12/04/2012, 02h08
Watilin
Bonsoir,
je ne comprends pas trop ta question, mais si tu déplaces le focus avec la touche TAB, tous les navigateurs suivent par défaut l'ordre du code HTML. Sauf si tu as mis des attributs tabindex. Mais si tu commences à en mettre, il faut en mettre partout, sinon les éléments qui n'en ont pas passent en dernier, c'est un peu contraignant.
Si tu fais ça en JavaScript, je comprends encore moins ta question, car pour appeler une méthode focus, tu dois forcément avoir une référence de l'élément concerné. Du coup tu es libre de choisir lequel...
Code:

1 2 3 4 <input type="text" id="text1" size="3" value="" /> <script type="text/javascript"> document.getElementById('text1').focus(); </script>
Note, ton problème n'a rien à voir avec une histoire d'encodage, tu devrais modifier ça en éditant ton post.
12/04/2012, 09h41
stanilas

salut

j'ai fait un focus sur les input mais le probleme c'est que je suis dans le champs jour ou annee ca me fait sauter au textfield d'apres c'est a dire quand je suis sur jour quand j'ai rempli le champ au max ben ca me met sur un autre input texfield. le mois pareil .
(le tab marche bien mais le probleme c'est le remplissage de champ qui change de champ,qui va sur un champ qui ne devrait pas aller, lorsque que celui ci est max.).
il y' a til une doc comme la javadoc sur les focntionnalite du champ car je suis novice dans le javascript.
il ya til une focntion pour prendre le champ du genre getid(nomde lid) ?

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
 
// Récupérer la longueur max
	limit = field.attr('maxlength');
 
	// Si la touche TAB est activée, ne pas faire le contrôle pour éviter les
	// pièges aux claviers
	if(key == 9 || key == 16)
		return true;
 
	// Calculer la longueur de la saisie
	longeur = field.val().length;
 
	// Répérer le champ suivant
	next = field.next('input').eq(0);	
	if( ! next.length){
		next = field.parent().next().find('input').eq(0);
	alert("next1:"+field.val());	
	}
	 if( ! next.length) { next =
		 field.parent().next().next().find('input').eq(0);
		  }
 
	// Une fois la limite atteinte, déplacer le focus
	if(next.length && longeur >= limit)
		{ 
		alert("next.id:"+next.id+"field.parent().next()"+field.parent().next().id);
		if(next.id=="dn_jj")
		{
			alert("je rentre dn_jj:"+next.id );
			while(next.id!="dn_mm")
			next=next.focus();
 
		//alert("next3:"+field.val()+" "+toto);
		}
		else if(next.id=="dn_mm"){alert("je rentre dn-mm:"+$next.id );
			while(next !=$('#dn_aaaa'))
				next=next.focus();
		}
		else {
			alert("je rentre:kkk"+next.eq(0).id);
			while(next!='undefined'){
				var i=0;
				alert("boucle:"+next.id);
				next=next.focus();
				}
 
		}
	}
}

pourquoi ca me defini undefined pour next ID ALORS QUE J'AI ENCORE DES CHAMPS A VISITER.

C'est la façon dont tu sélectionnes ton next qui est bizarre. Peut-être que ta structure HTML est trop compliquée...

Je vois que tu utilises la bibliothèque jQuery. Si tu ne sais pas comment sélectionner un élément par son ID, tu devrais suivre des tutoriels d'introduction à jQuery, car c'est le plus important à savoir !

Voici un exemple complet, dont le script peut tenir sur même pas dix lignes.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Focus avec jQuery</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="focus.js"></script>
</head>
<body>
 
<form method=get action=#>
	<fieldset>
		<legend>Date (jj/mm/aaaa)</legend>
		<input id=jour type=text maxlength=2 /> /
		<input id=mois type=text maxlength=2 /> /
		<input id=annee type=text maxlength=4 />
	</fieldset>
</form>
 
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// fichier focus.js
 
$(document).ready(function() {
 
	$('#jour, #mois, #annee').keypress(function( event ) {
		// event.which = 0 quand la touche frappée n'est pas un caractère
		if (!event.which) return;
 
		var $this = $(this);
		if ($this.val().length >= $this.attr('maxlength') - 1) {
			var $next = $this.next('input[type=text]');
			if ($next) $next.focus();
		}
	});
 
	// donne le focus au premier champ au chargement de la page
	$('#jour').focus();
 
});

13/04/2012, 21h29
stanilas

merci j'ai trouve la solution en fait ma fonction fonctionne sur firefox mais pas sur i7 I8 et chorme il me semble
et le probleme c'est que je suis sur struts2. ausssi avec un template particulier.
j'ai trouve la solution en gros quand j'arrive du le champ dn_dd( le champ jour )
je selectionne le prochain en dur avec suivent=Document.getElementbyId(dn_mm) et je fais suivant.focus() ainsi de suite apres pour le reste des champs je parcours normalement.
comment faire pour tester la position du curseur dans le champs
13/04/2012, 23h15
Willpower

Ca n'a rien à voir avec ton problème (j'ignore pourquoi tu sautes 2 champs plus loin, sans doute une double exécution de ta fonction, mais je devrais tester pour trouver l'origine de l'erreur) mais dans ton "return true;" le "true" ne sert à rien vu que la fonction appelante n'utilise pas la valeur de retour de cette première.

aucune utilisation du retour de nexfFieldAtChar :

Code:

$('#dn_dd, #dn_mm, #dn_aaaa').keyup(function(event) {nextFieldAtChar($(this), event.which);});

exemple d'utilisation du retour :

Code:

$('#dn_dd, #dn_mm, #dn_aaaa').keyup(function(event) {return nextFieldAtChar($(this), event.which);});