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

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

cs_Ougha Messages postés 2 Date d'inscription mercredi 9 mai 2007 Statut Membre Dernière intervention 10 mai 2007
10 mai 2007 à 10:28
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>
0
Anthed Messages postés 152 Date d'inscription dimanche 20 février 2005 Statut Membre Dernière intervention 17 janvier 2014 3
10 mai 2007 à 17:21
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ô.
0
Rejoignez-nous