saisie d'une adresse IP

**Emcy** · 10/08/2007, 11h22

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 ?

**LexWizard** · 10/08/2007, 13h19

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

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

**Emcy** · 10/08/2007, 14h17

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

**LexWizard** · 10/08/2007, 14h25

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.

**Emcy** · 10/08/2007, 14h39

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 ?

**LexWizard** · 10/08/2007, 14h42

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

**Emcy** · 10/08/2007, 14h46

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 ?

**LexWizard** · 10/08/2007, 15h18

Ah ok

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

**Emcy** · 10/08/2007, 15h21

ok, merci beaucoup

**Emcy** · 10/08/2007, 15h35

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 :

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

**LexWizard** · 10/08/2007, 16h12

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

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

**SpaceFrog** · 10/08/2007, 18h20

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

Code :

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

^(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])$

**Emcy** · 20/08/2007, 09h53

merci Lexwizard, ça marche nickel

Par contre je n'ai pas trop compris ou il faut mettre le regExp (ça marche bien sans)...

**SpaceFrog** · 20/08/2007, 10h01

heu bien entendu que cela marche sans , c'était une alternative plus courte ...

**Emcy** · 20/08/2007, 10h07

c'est pour remplacer ça (je n'ai jamais utiliser cette fonction) ?

Code :

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

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

**Emcy** · 20/08/2007, 10h08

c'est pour remplacer ça (je n'ai jamais utiliser cette fonction) ?

Code :

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

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

**Emcy** · 22/08/2007, 16h26

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

**LexWizard** · 22/08/2007, 16h33

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 :

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

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

Tu le met donc dans l'evement onfocus du textbox

**Emcy** · 23/08/2007, 08h47

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

**SpaceFrog** · 23/08/2007, 09h44

tu n'a pas du définir de TabIndex pour tes zones de saisie ...

saisie d'une adresse IP

JavaScript

Discussions similaires

Partager

Partager