Masque de saisie pour chaine de chiffres

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 618 fois - Téléchargée 26 fois

Contenu du snippet

Suite à un script que j'ai trouvé plus loin sur le site, je me suis dit que ce serait cool de pouvoir paramétrer la chose pour l'utiliser aussi bien pour des dates, que pour des numéros de téléphones, numéro de secu, .... Bref pour toutes les chaines de chiffres en générales.

le principe est simple, il suffit de passer a la fonction le nom de la balise INPUT, ainsi que le format souhaité :
- le '0' remplace n'importe quel chiffre
- les autres caractères seront insérer automatiquement a la bonne place.

pour essayer, copier-coller.

Je test en plus la touche BACKSPACE, donc maintenant on peut corriger si on fait une erreur ;)

Avec la fonction masqueSaisieChaineNum2, je permet à l'utilisateur d'utiliser les touches Backspace, Suppr, gauche et droite comme il veut. Il peut aussi Insérer un chiffre au milieu. Par contre pour cela il ne faut plus que je tienne compte du KeyDown...

Jugez-en par vous même, et servez vous de celle qui vous plait le mieux ;)

Source / Exemple :


<SCRIPT>
function masqueSaisieChaineNum(obj, masque) {
  var ch = obj.value
  var tmp = ""
  var j = 0
  ch.toString()
  
  if ((window.event.type == "keydown" || window.event.type == "keyup" ) && window.event.keyCode != 8) {
    for (i=0; i<ch.length; i++) {
      if (!isNaN(ch.charAt(i)) && ch.charAt(i) != " ") { tmp += ch.charAt(i) }
    }

    ch = ""

    for (i=0; i<masque.length; i++) {
      if (masque.charAt(i)  == "0") { 
        if (tmp.charAt(j) != "" ) {
          ch += tmp.charAt(j)
          j++
        }
        else { ch += " " }
      }
      else { ch += masque.charAt(i) }
    }
  }

  obj.value = ch
}

function masqueSaisieChaineNum2(obj, masque) {
  var ch = obj.value
  var tmp = ""
  var j = 0
  ch.toString()
  
  if (window.event.keyCode != 37 && window.event.keyCode != 39 && window.event.type != "keydown" && window.event.keyCode != 8 && window.event.keyCode != 46) {
    if (window.event.type == "keyup") {
      for (i=0; i<ch.length; i++) {
        if (!isNaN(ch.charAt(i)) && ch.charAt(i) != " ") { tmp += ch.charAt(i) }
      }
  
      ch = ""
  
      for (i=0; i<masque.length; i++) {
        if (masque.charAt(i)  == "0") { 
          if (tmp.charAt(j) != "" ) {
            ch += tmp.charAt(j)
            j++
          }
          else { ch += " " }
        }
        else { ch += masque.charAt(i) }
      }
    }
  
    obj.value = ch
  }
}

</SCRIPT>
<BR><BR><BR><BR>
<input type="text" name="numtel" size='15' value="" onKeyUp="masqueSaisieChaineNum(numtel, '00.00.00.00.00');" onKeyDown="masqueSaisieChaineNum(numtel, '00.00.00.00.00');">
<input type="text" name="date" size='11' value="" onKeyUp="masqueSaisieChaineNum(date, '00/00/0000');" onKeyDown="masqueSaisieChaineNum(date, '00/00/0000');">
<input type="text" name="numSecu" size='23' value="" onKeyUp="masqueSaisieChaineNum(numSecu, '0 00 00 00 000 000 00');" onKeyDown="masqueSaisieChaineNum(numSecu, '0 00 00 00 000 000 00');">
<input type="text" name="imat" size='10' value="" onKeyUp="masqueSaisieChaineNum(imat, '000 AFG 00');" onKeyDown="masqueSaisieChaineNum(imat, '000 AFG 00');">

Conclusion :


J'ai remplacé mes slice par des charAt c'est plus mieux ;)

Dans les balises <INPUT>, j'ai mis un onKeyUp et onKeyDown, pour éviter que la personne reste appuyer sur une touche et que la fonction se lance que quand il lache.

A voir également

Ajouter un commentaire

Commentaires

Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016

Merci, Mais pour Mozilla et Firefox, c'est sans doute possible mais là je n'y connait rien, n'ayant ni l'un ni l'autre... Je ne vais pas pouvoir vous aider.
Messages postés
1
Date d'inscription
mercredi 8 décembre 2004
Statut
Membre
Dernière intervention
8 décembre 2004

Bonjour,

très bon script surtout la deuxième version. Merci.
Serait-il possible de le rendre compatible Mozilla/Firefox pour qu'il passe aussi sur MAC OS ?
Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016

pok3549, j'ai rajouté une fonction quasi identique mais ou tu peux utiliser les touches fléchées.
Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016

Merci merci, tu vas me faire rougir.

Pour les flèches, à priori il faudrait essayer en rajoutant le code de la touche gauche et de la touche droite, et de rien faire si on appuie dessus.

Ecoute je regarde si j'arrive et je te tiens au courant.
A+
Jerm's
Messages postés
1
Date d'inscription
mardi 24 juin 2003
Statut
Membre
Dernière intervention
24 juin 2003

Félicitation, très astucieux comme script.
Mais comment faire pour que l'on prenne en compte les flêches (lorsque l'utilisateur se trompe) ?

Encore une fois bravo car script très rare.
Damien
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.