saisie d'une adresse IP

Version imprimable

10/08/2007, 11h22
Emcy

saisie d'une adresse IP

Bonjour,

je voudrais un champs de saisie "adresse IP" : comment le présenteriez-vous ?
4 textbox ? un texbox avec du javascript ? autre ?

pouvez-vous me montrer un exemple ?

Moi je ferrai avec 4 input type text, un peu de CSS pour faire joli, et du js. ça donnerai quelquechose comme ça :

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
<html>
<head>
<script type="text/javascript">
function ToIp(id)
{
    if(document.getElementById(id).value.length == 3 && parseInt(id)<4)
    document.getElementById(parseInt(id)+1).focus();
}
 
</script>
</head>
<body>
<table style="border: 1px solid Black;">
<tr>
    <td><input id="1" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td >.</td>
    <td><input id="2" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td>.</td>
    <td><input id="3" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td>.</td>
    <td><input id="4" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
</tr>
</table>
 
</body>
</html>

Voila, ça n'engage que moi :mrgreen:

10/08/2007, 14h17
Emcy

ok merci, je vais regarder ça de plus près.

sinon, ce n'est pas possible de faire un seul textbox avec le meme comportement que la configuration du réseau sous windows
voir panneau de configuration=>connection reseau=>protocole Internet
10/08/2007, 14h25
LexWizard

Je pense pas...
Justement avec le code que je t'ai donné, ça donne l'impression que c'est un seul textbox comme dans la config Windows.

;)
10/08/2007, 14h39
Emcy

ok
par contre, j'ai plusieur IP à rentrer...
donc j'ai besoin de separer du text pour pouvoir l'incrementer

ex : IP2 => IP et 2 => 2+1=3 => IP3

comment fait-on ?
10/08/2007, 14h42
LexWizard

Citation:

Envoyé par Emcy

ok
par contre, j'ai plusieur IP à rentrer...
donc j'ai besoin de separer du text pour pouvoir l'incrementer

ex : IP2 => IP et 2 => 2+1=3 => IP3

comment fait-on ?

:| Sorry, mais j'ai pas compris ce que tu veux faire...
10/08/2007, 14h46
Emcy

et bien en fait, je ne peux appeler mes textbox 1, 2, 3, 4 => il faut que je les appele :
- IP1_1, IP1_2, IP1_3, IP1_4
- IP2_1, IP2_2, IP2_3, IP2_4
....
comment faire pour séparer le chiffre en fin de chaine pour pouvoir faire l'incrementation ?

Ah ok :D

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
 
<html>
<head>
<script type="text/javascript">
function ToIp(id)
{
    var numID = parseInt(id.substr(id.indexOf("_")+1));
    var nomID = id.substr(0,id.indexOf("_")+1);
    if(document.getElementById(id).value.length == 3 && numID < 4)
        document.getElementById(nomID + parseInt(numID+1)).focus();
}
 
</script>
</head>
<body>
<table style="border: 1px solid Black;">
<tr>
    <td><input id="IP1_1" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td >.</td>
    <td><input id="IP1_2" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td>.</td>
    <td><input id="IP1_3" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td>.</td>
    <td><input id="IP1_4" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
</tr>
<tr>
    <td><input id="IP2_1" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td >.</td>
    <td><input id="IP2_2" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td>.</td>
    <td><input id="IP2_3" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
    <td>.</td>
    <td><input id="IP2_4" style="border:none; width:30px;" onkeyup="ToIp(this.id);" maxlength="3" type="text" value="" /></td>
</tr>
</table>
</body>
</html>

Et ainsi de suite ;)

10/08/2007, 15h21
Emcy

ok, merci beaucoup ;)

en fait, y a un probleme => sous firefox, si je clique sur une textbox (sauf celle a gauche), le curseur va automatiquement sur la textbox à gauche

voici 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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="en" >
	<head>
		<title>toto</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
		<script type="text/javascript">
		// <![CDATA[
 
function getId(Nom){
	return document.getElementById(Nom);
};
 
function CtrlAddr(Me)
{	
	Me.value = Me.value.replace(/[^0-9]/g,"");
 
	if (Me.value > 255){
		Me.value = 255;
	};
 
	temp = Me.id.slice(2)*1;
 
	if(Me.value.length > 2 && temp>0){
		getId(Me.id.slice(0,2) + (temp-1)).focus();
	}
};
 
		// ]]>
		</script>
	</head>
 
	<body>
		<div id="page">	
 
				<div id="centre">
					<noscript><h1>Erreur : Javascript est désactivé</h1></noscript>
 
					<form id="Configuration" action="">
 
						<div class="divport">
							<fieldset class="port">
								<legend>Configuration TCP/IP de la supervision</legend>
 
								<div id="z_DHCP">
									<fieldset>
										<legend>IP Fixe</legend>
 
										<p>
											<label>
												Adresse IP :<br />
												<input type="text" class="classAddr" id="IP3" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="IP2" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="IP1" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="IP0" onkeyup="CtrlAddr(this);"/>
											</label>
										</p>
 
										<p>
											<label>
												Masque de sous-réseau :<br />
												<input type="text" class="classAddr" id="Ma3" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="Ma2" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="Ma1" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="Ma0" onkeyup="CtrlAddr(this);"/>
											</label>
										</p>
 
										<p>
											<label>
												Passerelle par défaut :<br />
												<input type="text" class="classAddr" id="Pa3" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="Pa2" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="Pa1" onkeyup="CtrlAddr(this);"/>
												<input type="text" class="classAddr" id="Pa0" onkeyup="CtrlAddr(this);"/>
											</label>
										</p>
 
									</fieldset>
								</div>
							</fieldset>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

Le problème ne vient pas de mon script, mais ça fonctionne si tu fais comme ça :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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="en" >
	<head>
		<title>toto</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
		<script type="text/javascript">
		// <![CDATA[
 
function getId(Nom){
	return document.getElementById(Nom);
};
 
function CtrlAddr(Me)
{	
	Me.value = Me.value.replace(/[^0-9]/g,"");
 
	if (Me.value > 255){
		Me.value = 255;
	};
 
	temp = Me.id.slice(2)*1;
 
	if(Me.value.length > 2 && temp>0){
		getId(Me.id.slice(0,2) + (temp-1)).focus();
	}
	var numID = parseInt(Me.id.substr(Me.id.indexOf("_")+1));
    var nomID = Me.id.substr(0,Me.id.indexOf("_")+1);
    if(Me.value.length == 3 && numID < 4)
        document.getElementById(nomID + parseInt(numID+1)).focus();
 
};
 
		// ]]>
		</script>
	</head>
 
	<body>
		<div id="page">	
 
				<div id="centre">
					<noscript><h1>Erreur : Javascript est désactivé</h1></noscript>
 
					<form id="Configuration" action="">
 
						<div class="divport">
							<fieldset class="port">
								<legend>Configuration TCP/IP de la supervision</legend>
 
								<div id="z_DHCP">
									<fieldset>
										<legend>IP Fixe</legend>
 
												Adresse IP :<br />
												<table style="border: 1px solid Black;">
                                                <tr>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="IP0_1" maxlength="3" onkeyup="CtrlAddr(this);" /></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="IP0_2" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="IP0_3" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="IP0_4" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                </tr>
                                                </table>
 
												Masque de sous-réseau :<br />
												<table style="border: 1px solid Black;">
                                                <tr>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Ma0_1" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Ma0_2" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Ma0_3" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Ma0_4" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                </tr>
                                                </table>
 
												Passerelle par défaut :<br />
												<table style="border: 1px solid Black;">
                                                <tr>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Pa0_1" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Pa0_2" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Pa0_3" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                    <td>.</td>
                                                    <td><input style="border:0; width:30px;" type="text" class="classAddr" id="Pa0_4" maxlength="3" onkeyup="CtrlAddr(this);"/></td>
                                                </tr>
                                                </table>
 
									</fieldset>
								</div>
							</fieldset>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

10/08/2007, 18h20
SpaceFrog

et puis tu peux coller un regExp pour vérifier :

Code:

^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$
20/08/2007, 09h53
Emcy

merci Lexwizard, ça marche nickel ;)

Par contre je n'ai pas trop compris ou il faut mettre le regExp (ça marche bien sans)...
20/08/2007, 10h01
SpaceFrog

heu bien entendu que cela marche sans , c'était une alternative plus courte ...
20/08/2007, 10h07
Emcy
c'est pour remplacer ça (je n'ai jamais utiliser cette fonction) ?
Code:

1 2 3 4 5 Me.value = Me.value.replace(/[^0-9]/g,""); if (Me.value > 255){ Me.value = 255; };
=> si c'est le cas, je n'ai pas trop l'impression que ça
20/08/2007, 10h08
Emcy
c'est pour remplacer ça (je n'ai jamais utiliser cette fonction) ?
Code:

1 2 3 4 5 Me.value = Me.value.replace(/[^0-9]/g,""); if (Me.value > 255){ Me.value = 255; };
=> je n'ai pas trop compris comment ça s'utilise....
22/08/2007, 16h26
Emcy

S'il y a deja une adresse IP rentrée, lorsque qu'il y a le changement de champs automatique : est-il possible qu'en meme temps, ça selectionne tous les caractères de la textbox en cours (car sinon il faut appuyer sur delete 3 fois avant de pourvoir rentrer le nombre) ? ...j'espere que vous avez compris ce que je veux dire...
22/08/2007, 16h33
LexWizard

Citation:

Envoyé par Emcy

S'il y a deja une adresse IP rentrée, lorsque qu'il y a le changement de champs automatique : est-il possible qu'en meme temps, ça selectionne tous les caractères de la textbox en cours (car sinon il faut appuyer sur delete 3 fois avant de pourvoir rentrer le nombre) ? ...j'espere que vous avez compris ce que je veux dire...

Il me semble qu'il faut faire

Code:

document.getElementById("Element").select();

Tu le met donc dans l'evement onfocus du textbox
23/08/2007, 08h47
Emcy

merci ça marche ;) ... mais il y a encore un dernier problème

si mes quatre textbox sont remplies par des nombre à 3 chiffres : si on se positionne sur la première textbox et qu'on appuye sur tab pour changer de champs, alors on passe directement à la texbox 3 (aussi, si on fait un shift + Tab pour revenir sur la textbox precedente, ça ne marche pas)... se fonctionnement est du que sur onkeyup si la texbox à trois chiffres alors on passe à la textbox suivante...

j'ai le meme genre de problème si je veux utiliser les touches fleches pour déplacer mon curseur...
23/08/2007, 09h44
SpaceFrog

tu n'a pas du définir de TabIndex pour tes zones de saisie ...
23/08/2007, 10h30
Emcy

Non, ça ne vient pas de ça

j'explique le fonctionnement :
- a l'etat initiale les texbox ont toute un nombre sur trois chiffres
- je clique sur la première => ça me selectionne le champs complet
- après, j'appuye sur TAB => lorsque j'appuye sur tab, le focus va sur la textbox suivante => lorsque je relache la touche tab, il y a l'evenement de la deuxieme textbox onkeyup qui s'enclanche => l'evenement onkeyup dit que s'il y a 3 chiffres dans la textbox on met le focus sur la texbox suivante : c'est ce qui se passe...

=> donc en appuyant une fois sur tab, ça fais comme si on appyait deux fois (j'espère que tu as compris le problème)
23/08/2007, 15h45
SpaceFrog

voir la FAQ et les propositons de code source ...
23/08/2007, 16h29
Emcy

la seule solution que j'ai trouvée, c'est de detecter la touche qui à été pressé avant de faire le changement auto de focus mais c'est lourd à gérer vu qu'il faut gérer la compatibilié entre les navigateurs => finalement, je vais rester sur une solution simple => lors du chagement de focus, je selectionne tout le text (et j'utilise tab pour me deplpacer entre les differentes textbox) ...