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

Soyez le premier à donner votre avis sur cette source.

Vue 64 316 fois - Téléchargée 4 215 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

LocalStone
Messages postés
515
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
C'est le retour de Iubito sur le devant de la scène !
C'est une bonne idée (qui fonctionne, et ça c'est pas mal) mais j'ai une petite suggestion ... Ton système marche avec des classes, mais pourquoi ne pas directement ajouter une propriété à la balise ?
Par exemple, tu as et la propriété mask de cette balise permet d'avoir le masque correpondant ...
Enfin voilà quoi ...
LocalStone
ThunderPsycho
Messages postés
180
Date d'inscription
lundi 3 juin 2002
Statut
Membre
Dernière intervention
4 février 2007
-
Bonne remarque... :o/ Sans commentaire :o)))
cs_iubito
Messages postés
629
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
9 octobre 2006
-
Hello LocalStone ! :-)

C'est une bonnée idée mais es-tu sûr que si je rajoute directement un attribuet toto="pouet pouet" sur une balise ça sera pris en compte comme une propriété de l'objet input ?
... euh ... bon... un bout de code....

<html>
<head>
</head>

<form name="f">

</form>
<script>
alert(document.f.i.toto);
</script>

</html>

sur IE6 sur le PC de mon padre ça marche !!!! ce soir je teste sur le mien et avec différents navigateurs ;-)

ch'avé pa qu'on pouvait rajouter des attributs comme ça ! :o)))))

mais bon après il faut tout de même du JS pour associer les événements onkeydown, onkeyup, onblur quand y'a un mask... idée à creuser ! merci !
LocalStone
Messages postés
515
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Bah y a pas de quoi, c'est une petite constatation que j'ai eu qui m'a également étonné ... En échange, tu veux bien m'expliquer les classes en javascript :P, s'il te plait ... Parce que y a pas trop de tuto la dessus et je t'avoue que me lancer tête baissée la dedans ne me rejouis pas plus que ça ... :(
LocalStone
SgtKabukinan
Messages postés
106
Date d'inscription
lundi 20 septembre 2004
Statut
Membre
Dernière intervention
23 janvier 2010
-
Le site est tout beau maintenant !!!

L'interet de la classe c'est qu'en définissant un mask tu peux l'appliquer sur plusieurs champs en même temps.

Si tu le met en attribut de balise, tu dois te le retaper pour chaque champs (sauf si tu dynamise le tout) mais franchement pour l'instant, y'a pas mieux que ce script la ;)

Enfin j'aurai juste une question... Pour redéfninir le onblur sans modifier le script de base. Comment fais-je ?

Merci

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.