Masques de saisie

**weskog** · 27/04/2010, 17h55

Bonjour à tous,

Très débutant en javascript, j'ai effectué quelques recherches sur les masques de saisie de champs de formulaire avec javascript. Malheureusement toutes mes recherches se sont montrées infructueuses.

Ma question est donc simple, comment faire pour mettre un masque de saisie sur un champs d'un formulaire comme par exemple un champs date qui, lorsque l'utilisateur rentre une date, le format du champs se mette automatiquement en type jj/mm/aaaa pendant que l'utilisateur encode cette date ?

J'ai trouvé une solution avec ce genre de code mais cela semble ne pas fonctionner sous firefox:
# Première chose, inclure le script ! héhé ;o)
Dans la section <head></head>, insère la ligne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script language="JavaScript1.2" src="masks.js"></script>

# Repère les champs et les formats que tu veux appliquer. Par exemple dans le formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form name="monform" action=....>
<input type="text" name="datedebut"/>
<input type="text" name="datefin"/>
<input type="text" name="montant"/>
...
</form>

Il est important que le formulaire <form> et les champs <input> aient leur attribut name renseigné.

Dans cet exemple, nous allons choisir le format de date à la française (jj/mm/aaaa) et le montant en euro - le symbole € se met automatiquement c'est magique ! -.
# Donc les 2 masques que nous allons utiliser pour ce formulaire sont :

* date : jj/mm/aaaa
* number : €#_###.00 - 2 chiffres après la virgule, le point . pour séparateur de décimales, un espace représenté par un souligné _ pour séparer les milliers, on peut mettre autant de chiffres qu'on veut avant le point ils seront groupés par 3, par contre il y aura toujours 2 décimales.

On peut utiliser un même masque pour plusieurs champs.
# Ensuite on crée la fonction javascript qui instancie les masques, et les affecte à des champs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script language="JavaScript1.2">
// Mask JavaScript API (v0.3) - dswitzer [chez] pengoworks [point] com - iubito [chez] asp-php [point] net
function init()
{
   // Création du masque date jj/mm/aaaa
   oDateMask = new Mask("jj/mm/aaaa", "date");
   // Création du masque montant en euro
   oEuroMask = new Mask("€#_###.00", "number");
   // Associer le oDateMask aux 2 champs
   oDateMask.attach(document.monform.datedebut);
   oDateMask.attach(document.monform.datefin);
   // Associer le oEuroMask au champ
   oEuroMask.attach(document.monform.montant);
}
</script>