saisie d'une adresse IP

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Voir 40 message(s) de cette discussion en une page