IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Renseigner numero de telephone


Sujet :

JavaScript

  1. #1
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut 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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    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 ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    CUCARACHA
    Invité(e)
    Par défaut 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

  4. #4
    CUCARACHA
    Invité(e)
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    une usine à gaz pour pas grand chose ... +1

  5. #5
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    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 ??

  6. #6
    CUCARACHA
    Invité(e)
    Par défaut
    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();

  7. #7
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Ok je vais regarder ça. Laurent, j'aime beaucoup ton avatar

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    dans ce style là :
    a perefectionner sans doute
    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
     
    <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>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre habitué
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Points : 185
    Points
    185
    Par défaut
    Super SpaceFrog, ton code fait exactement ce que je veux. Merci beaucoup. (Dsl pour le retard, j'etais sur un autre truc )

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [RegEx] ereg et numero de telephone
    Par cirvent dans le forum Langage
    Réponses: 5
    Dernier message: 13/01/2009, 22h56
  2. format numero de telephone
    Par Invité dans le forum VBA Access
    Réponses: 2
    Dernier message: 02/10/2008, 18h10
  3. Expression régulière pour numero de telephone
    Par moutey dans le forum Algorithmes et structures de données
    Réponses: 12
    Dernier message: 27/11/2007, 19h34
  4. Réponses: 8
    Dernier message: 11/12/2006, 20h03
  5. format du numero de telephone...?
    Par bris dans le forum Débuter
    Réponses: 2
    Dernier message: 20/09/2005, 12h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo