insertion lors de la saisie d'un séparateur de numéro de téléphone

**Ougha** · 09/05/2007, 17h11

Bonjour,

Je me casse la tête sur un problème de masque de numéro de téléphone.

Je voudrais que le séparateur (- par exemple) se remplisse automatiquement pendant que l'utilisateur saisie le numéro de téléphone.

J'ai ajouté une function javascript sur mon input, qui se déclenche sur l'évènement onkeypress, mais je n'arrive vraiment pas à tout combiner.

Je voudrais que l'utilisateur puisse (pas l'un ou l'autre de façon obligatoire, il saisie comme il le veut, c'est là qu'est la difficulté...) saisir ces différents masques :
01-23-45-67-89
+33-1-23-45-67-89
+33-(0)1-23-45-67-89

Il ne saisie donc que les +() et les chiffres. Les - se rajoutent où il faut au fur et à mesure qu'il rempli l'input.

Est ce qqun a déjà fait ce genre de chose ?

Merci beaucoup.

**SpaceFrog** · 10/05/2007, 09h40

à moin avis vouloir le faire en direct au moment de la saisie sur un keypress ou keydown ou plus logique keyup serait du suicide ... trop de choses à gérer ...
as tu pensé à l'insertion en milieu de chiffre? au del arrière au suppr ou inser ?

ne serait il pas plus simple de le faire sur le onblur du champs à là avec une paire de split() et de join() et si tu as un peu de courage des regExp tu devrait réussir à formatter le numéro comme tu l'entends ...

**Ougha** · 10/05/2007, 10h26

Mon code final, si vous avez plus efficace je suis preneur

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
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var separNumTel = '-';
//trigger holders
var wasplusAdded = false;
var wasparleftAdded = false;
var wasparrightAdded = false;
 
function addSepNumTel(event, obj) {
	var keyCode = event.keyCode?event.keyCode:event.which;
	//evite de perdre la position du focus sur les touches backspace, prec, suiv, suppr
	if(keyCode != 8 && keyCode != 37 && keyCode != 39  && keyCode != 46) {
		var value = obj.value;
		var trueValue; //this will hold the true number count
		var valueTmp = '';
		var count = 0;
		// holders
		var plusAdded = "";
		var parleftAdded = "";
		var parrightAdded = "";
		//first Remove all special char + - ()
		trueValue = value.replace(/[-()+]+/g,"");
		//determine if the user has aad one of the following + ,( ,)
		if(value.indexOf('+') != -1) {
			trueValue = trueValue.replace(/\++/g,"");
			plusAdded="+";
			wasplusAdded = true;
		} else {
			//incase item was deleted reset trigger to false
			wasplusAdded = false;
		}
		if(value.indexOf('(') != -1) {
			trueValue = trueValue.replace(/\)+/g,"");
			parleftAdded = "(";
			wasparleftAdded = true;
		} else {
			//incase item was deleted reset trigger to false
			wasparleftAdded = false;
		}
		if(value.indexOf(')') != -1) {
			trueValue = trueValue.replace(/\(+/g,"");
			parrightAdded = ")";
			wasparrightAdded = true;
		} else {
			//incase item was deleted reset trigger to false
			wasparrightAdded = false;
		}
 
		var i = 0;
		if(wasplusAdded) {
			valueTmp = plusAdded;
			if(trueValue.length > 0) {
				valueTmp += trueValue.charAt(i++);
			}
			if(trueValue.length > 1) {
				valueTmp += trueValue.charAt(i++);
				valueTmp += separNumTel;
				count ++;
			}
		}
		if(wasparleftAdded) {
			valueTmp += parleftAdded;
			if(trueValue.length > i) {
				valueTmp += trueValue.charAt(i++);
			}
			if(wasparrightAdded) {
				valueTmp += parrightAdded;
				if(wasplusAdded) {
					count ++;
				}
			}
		}
		while(i < trueValue.length) {
			if(i != 0 && (i - count)%2 == 0) {
				valueTmp += separNumTel;
				valueTmp += trueValue.charAt(i++);
			} else {
				valueTmp += trueValue.charAt(i++);
			}
		}
		obj.value = valueTmp;
	}
}
 
function verifTel(event) {
	var authorizedChar = eval('/[' + separNumTel + '+()0123456789]/');
	var keyCode = event.keyCode?event.keyCode:event.which;
	var char = String.fromCharCode(keyCode);
 
	//on autorise backspace, enter,ctrl, shift, alt, ..., prec, suiv, suppr
	if(keyCode > 20 && keyCode != 37 && keyCode != 39  && keyCode != 46  && !authorizedChar.test(char)) {
		alert('Les caract\350res autoris\351s sont : +()' + separNumTel + '0123456789');
		return false;
	}
	return true;
}
</script>
</head>
<body>
 
<input type="text" name="phone" value="" onKeyPress="return verifTel(event);" onKeyUp="return addSepNumTel(event, this);"/>
<p>01-23-45-67-89<br /> +33-1-23-45-67-89<br /> +33-(0)1-23-45-67-89<br/>(0)1-23-45-67-89</p>
 
</body>
</html>

insertion lors de la saisie d'un séparateur de numéro de téléphone

JavaScript

Discussions similaires

Partager

Partager