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 :
# Repère les champs et les formats que tu veux appliquer. Par exemple dans le formulaire :Code:<script language="JavaScript1.2" src="masks.js"></script>
Code:
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.
# Enfin, il ne te reste plus qu'à lancer la fonction au chargement de la pageCode:
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>
Code:<body onload="init();">