Maskedit : masques de saisie !!! (dates, nombres, chaines...)

Télécharger le projet
Commenter

Description

N'as-tu jamais rêvé de faire des masques de saisie sur des zones de texte, comme dans VB et Delphi ?
Voici un script qui rendra les sites plus "pro".

Au menu :
- saisie de dates
- saisie de nombres et symboles monétaires
- saisie de chaînes de caractères

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 (en ASP, PHP, JSP...), mais ça évite certaines fautes de frappe... c'est déjà ça ;-)

Source / Exemple : 


CE QU'IL FAUT FAIRE :

- Voir mon tuto ici : http://www.asp-php.net/scripts/scripting/maskedit.php (avec exemples testable en live ;-) )
- télécharger le zip

Ensuite, dans le code :
1. dans la section <head></head>
<script language="JavaScript1.2" src="masks.js"></script>

2. Si ton formulaire contient 2 dates (que tu veux en jj/mm/aaaa) et un prix en euro
<form name="monform" action=....>
<input type="text" name="datedebut"/>
<input type="text" name="datefin"/>
<input type="text" name="montant"/>
...
</form>

3. La fonction qui initialise les masks et les "attache" aux champ
dans le <head></head>
<script language="JavaScript1.2">
// Mask JavaScript API (v0.3) - dswitzer -AT- pengoworks -POINT- com - iubito -AT- 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>

4. <body onload="init();">

Conclusion :


Pour plus de détailes, voir le tutorial http://www.asp-php.net/scripts/scripting/maskedit.php

Le zip contient aussi 3 pages de démos, pour les dates, les nombres et les chaînes

Enjoy !

http://iubito.free.fr
Télécharger le projet

Codes Sources

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_iubito)