Renseigner numero de telephone

Version imprimable

24/06/2008, 09h34
identifiant_bidon

Renseigner numero de telephone

Bonjour a tous

Voici mon problème (et il est corsé):
Je voudrais pouvoir faire en sorte qu'un client puisse renseigner son numéro de téléphone dans un champ de type input. A l'origine dans ce champ se trouvent des tirets (en position 3, 6, 9, 12). Lorsque l'utilisateur renseigne son numéro de téléphone, les chiffres se placent bien aux emplacements qui vont bien (entre les tirets qui étaient déjà là).

J'espère avoir été assez clair. Si qq'un a une idée je suis preneur

Merci beaucoup
24/06/2008, 09h44
SpaceFrog

une usine à gaz pour pas grand chose ...
en plus avec des regExp sur le onkeyup et le onmouseup bref beaucoup de complications pour un resultat somme toute assez inutile ...

essaye plutot de mettre plusieurs inputs à la suite avec un maxLength de 2 des tabIndex et des tirets entre les inouts, avec un peu de css totu cela sera invisible pour le user ...
24/06/2008, 09h46
CUCARACHA

interception d'évennement

Salut

Il faut que tu utilises une interception d'évènement des keyDown. Si tu es en cross browser tu risques de galérer un peu.

Tu interceptes les touches, tu stockes les résultats dans un tableau, tu remplis manuellement la text box et tu "return false" pour que les lettres tapées ne viennent pas se mettre dans la text box.

Si j'étais toi, je mettrais plutôt plusieurs textbox a mon avis tu galères pour rien.
C'est plus simple de valider le format du tel après coup.

++
Laurent
24/06/2008, 09h47
CUCARACHA

Citation:

Envoyé par SpaceFrog

une usine à gaz pour pas grand chose ... +1
24/06/2008, 09h49
identifiant_bidon

Merci les gars , je pense en effet que cette solution est la meilleure, j'y avais d'ailleurs pensé mais par contre, comment faire en sorte de passer d'un champ a l'autre sans que l'utilisateur ne fasse Tab ??
24/06/2008, 09h51
CUCARACHA

Idem, interception d'évennement mais sur keyUp cette fois ci. A chaque fois, tu comptes le nombre de caractères s'il est égal à 2 tu passes au champ suivant en utilisant la méthode .focus();
24/06/2008, 09h56
identifiant_bidon

Ok je vais regarder ça. Laurent, j'aime beaucoup ton avatar ;)

dans ce style là :
a perefectionner sans doute

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
 
<style type='text/css' >
.phone { width:15px;
         border:0;
         }
.inputphone  {border:inset 2px grey;}
</style>
<script type='text/javascript'>
function Autotab(box, longueur, texte)
{
    if (texte.length > longueur-1) {
        document.getElementsByName('tel[]')[box].focus();
    }
}
</script>
</head>
 
<body>
<span class='inputphone'>
<input type='text' maxLength="2"  size="2" name="tel[]" class='phone' tabIndex="1" onkeyup="Autotab(1, this.size, this.value)" />
-<input type='text' maxLength="2" size="2" name="tel[]" class='phone' tabIndex="2" onkeyup="Autotab(2, this.size, this.value)"/>
-<input type='text' maxLength="2" size="2" name="tel[]" class='phone' tabIndex="3" onkeyup="Autotab(3, this.size, this.value)"/>
-<input type='text' maxLength="2" size="2" name="tel[]" class='phone' tabIndex="4" onkeyup="Autotab(4, this.size, this.value)"/>
-<input type='text' maxLength="2" size="2" name="tel[]" class='phone' tabIndex="5" />
</div>
</body>
 
</html>

24/06/2008, 11h23
identifiant_bidon

Super SpaceFrog, ton code fait exactement ce que je veux. Merci beaucoup. (Dsl pour le retard, j'etais sur un autre truc ;) )