Masque de saisie pour chaine de chiffres

Commenter

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

S'inscrire maintenant

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.

Du même auteur (cs_jerms)