begin process at 2012 05 29 12:06:21
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

insertion pendant la saisie d'un séparateur de numéo de téléphone


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

insertion pendant la saisie d'un séparateur de numéo de téléphone

mercredi 9 mai 2007 à 17:17:58 | insertion pendant la saisie d'un séparateur de numéo de téléphone

Ougha

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.
jeudi 10 mai 2007 à 10:28:14 | Re : insertion pendant la saisie d'un séparateur de numéo de téléphone

Ougha

Voici ce que j'ai pondu au final, si qqun a plus efficace...

[CODE]<!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>[/CODE]
jeudi 10 mai 2007 à 17:21:10 | Re : insertion pendant la saisie d'un séparateur de numéo de téléphone

Anthed

Hello,

Un truc qui peut te simplifier la vie, c'est de n'effectuer ta mise en forme qu'à la fin de la saisie de l'utilisateur (sur le onblur de l'input). En plus, ça choque moins que de modifier le texte pendant la saisie. A toi de voir ...

Tchô.


Cette discussion est classée dans : insertion, saisie, téléphone, séparateur, numéo


Répondre à ce message

Sujets en rapport avec ce message

zone de saisie en html [ par tetelle ] Bonjour,est il possible de modifier la couleur de fond de la zone de saisied'avance mercichristelle Pointeur de souris [ par Freddy ] Bonjour a tousvoila mon souci, dans un formulaire contenant des boites de saisieje voudrais que par défaut mon curseur de sourisce positionne automati supprimer la saisie automatique ? [ par evange ] Bonjour et merci d'avance a ceux qui liront ces lignes :)Voila, je recherche un moyen d'empecher l'activation de la saisie automatique dans l'un de me Focus avec NS7 [ par Developpement ] Bonjour,Dans mon formulaire, je souhaite valider une zone de saisie. J'ai donc utilise une fonction javascript sur l'evenement onBlur. Dans le cas ou Saisie de date en asp [ par breakdancer971 ] Bonjour,j'utilise dreamweaverMxj'ai créé un formulaire ou l'on doit saisir des dates et lorsque je les enregistre quelque soit le format soit access o Controle formulaire paranoiaque [ par ma2x ] Bonjour à tousIl m'a été demandé dans le cadre du boulot de mettre en oeuvre une interface de saisie de données soumis à des controles de toutes parts Eval [ par stephbb75 ] Salut tous,Une tit question sur eval.Voila ce que je veut faire :J'ai des variablesvar v1 = toto;var v2 = titi;...Et sur saissie d'un formulaire, je v Formulaire Javascript interactif [ par dristan ] Voilà mon problème, supposons que j'ai un formulaire avec un champs téléphone divisé en trois parties: Indicatif du pays, indicatif régionale et le nu insertion texte [ par eax ] salut!je cherche à insérer du texte dans un textarea à l'endroit du curseur lorsque l'on clique sur une imagebye Sylvain [email</ Supprimer un menu sur une zone de saisie [ par FleurDeLys ] Salut, je voudrais savoir s'il est possible de supprimer un menu IE qui apparaît lors du clic droit de la souris


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,374 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales