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

Signaler
Messages postés
2
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
10 mai 2007
-
Messages postés
152
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
17 janvier 2014
-
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.

2 réponses

Messages postés
2
Date d'inscription
mercredi 9 mai 2007
Statut
Membre
Dernière intervention
10 mai 2007

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

<!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 &amp;&amp; keyCode != 37 &amp;&amp; keyCode != 39  &amp;&amp; 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 &amp;&amp; (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 &amp;&amp; keyCode != 37 &amp;&amp; keyCode != 39  &amp;&amp; keyCode != 46  &amp;&amp; !authorizedChar.test(char)) {
        alert('Les caract\350res autoris\351s sont : +()' + separNumTel + '0123456789');
        return false;
    }
    return true;
}
</script>
</head>

01-23-45-67-89
 +33-1-23-45-67-89
 +33-(0)1-23-45-67-89
(0)1-23-45-67-89

</html>
Messages postés
152
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
17 janvier 2014
3
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ô.