Principe -
Ce qu'il faut faire -
Aller un peu plus loin -
Format "date" -
Format "number" -
Format "string" -
Télécharger !
Je ne suis pas l'auteur de ce script génialissime, mais je cherchais ça pour le boulot et je suis comblé, donc je partage le secret :-)
Et surtout je l'ai amélioré !! ;o)
Tout d'abord, en remerciement à l'auteur, voici sa page web : Pengoworks
(la page montre 3 exemples)
Télécharge ce fichier zip qui contient le javascript amélioré et des exemples ;-)
Principe de base (très simple)
Imagines tu as un site web avec des formulaires, et tu veux que les gens saisissent des chiffres, des dates, un numéro de téléphone...
Il faut contrôler rigoureusement la saisie pour éviter qu'un petit malin écrive des lettres !
Ce script n'est pas parfait, ne passe pas forcément sur tous les navigateurs, donc ça ne dispense pas d'un contrôle supplémentaire, mais ça évite certaines fautes de frappe... c'est déjà ça ;-)
Il y a 3 types de formatage possibles :
Ce qu'il faut faire
- Première chose, inclure le script ! héhé ;o)
Dans la section <head></head>, insère la ligne :
<script language="JavaScript1.2" src="masks.js"></script>
|
- Repère les champs et les formats que tu veux appliquer. Par exemple dans le formulaire :
<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.
<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>
|
- Enfin, il ne te reste plus qu'à lancer la fonction au chargement de la page
Et hop! voilà le travail ;-)
Pour aller un peu plus loin...
Champs ayant le même nom
Parfois, il y a des formulaires avec des champs qui portent le même attribut name... le langage serveur (ASP, JSP ou PHP) récupère ça sous la forme de tableau. JavaScript aussi !
Pour "attacher" un masque à une série des champs portant le même nom, la fonction init() doit être du style :
function init()
{
oEuroMask = new Mask("€#_###.00", "number");
// Attache à chaque champ appelé 'champs'
for (i=0; i<document.monform.champs.length; i++)
{
oEuroMask.attach(document.monform.champs[i]);
}
}
|
Reformatage
Si les zones sont remplies
- par une base de données au chargement de la page
- par un javascript (résultat d'un calcul, calendrier qui insère une date...)
on peut reformater l'affichage comme ceci :
// Reformatage
if (document.monform.monchamp.value != '')
document.monform.monchamp.value = oEuroMask.format(document.monform.monchamp.value);
|
Tu veux utiliser ta propre fonction de vérification (sur le onblur) ?
MaskEdit fait certaines vérifications au cours de la saisie, notamment sur les nombres. Il est conseillé pour les dates de mettre une vérification supplémentaire à la fin, mais tu peux sans doute avoir tes propres besoins (nombre entre x et y...).
Concrètement, le javascript met en place 3 événements (à la ligne 17) :
Mask.prototype.attach = function (o)
{
if ((o.readonly == null) || (o.readonly == false))
{
o.onkeydown = new Function("return " + this.ref + ".isAllowKeyPress(event, this)");
o.onkeyup = new Function("return " + this.ref + ".getKeyPress(event, this)");
o.onblur = new Function("this.value = " + this.ref + ".format(this.value)");
}
}
|
Si le champ n'est pas en lecture seule (readonly), alors crée les fonctions onkeydown, onkeyup et onblur.
Pour utiliser une fonction perso, il faut mettre en commentaire la ligne o.oblur, et pour faire bien les choses, dans la fonction il faut faire un reformatage (voir le paragraphe juste au-dessus)
Gestion des erreurs
Dans les démos qui suivent, j'ai mis un textarea (nommé document.frmExample.erreur) qui affiche les messages d'erreur.
Dans le fichier masks.js, à la ligne 87, il y a la fonction Mask.prototype.throwError = function (c, e, v).
J'y ai mis quelques exemples d'affichage, de stockage du message d'erreur.
// alert(e);
// une_variable = e;
// document.formulaire.inputhidden.value = e; |
Le alert() est a éviter parce qu'il averti "trop" souvent et surtout fait perdre le focus au champ de saisie.
Principe -
Ce qu'il faut faire -
Aller un peu plus loin -
Format "date" -
Format "number" -
Format "string" -
Télécharger !
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
