1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Maskedit : masques de saisie !!! (dates, nombres, chaines...)

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

4/5 (48 avis)

Vue 66 941 fois - Téléchargée 4 365 fois

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

Ajouter un commentaire Commentaires
divil
Messages postés
22
Date d'inscription
mercredi 18 octobre 2000
Statut
Membre
Dernière intervention
9 décembre 2005
6 avril 2013 à 16:15
salut à tous,
comme l'a suggéré db77, il s'agissait bien d'un soucis de version .... la 0.4b est OK avec les derniers navigateurs
merci.
divil
Messages postés
22
Date d'inscription
mercredi 18 octobre 2000
Statut
Membre
Dernière intervention
9 décembre 2005
4 avril 2013 à 20:00
Merci db77 .... c'était tout simplement ça !

j'ai téléchargé la version 0.4b, patché mon site et c'est OK pour IE 10 et Firefox 20 ...

nickel !
cs_iubito
Messages postés
629
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
9 octobre 2006
4 avril 2013 à 13:26
Et moi qui pensais que FF respecterai les recommandations W3C et HTML5 avant les autres. ça fait longtemps que je ne l'utilise plus mais pour d'autres raisons.
IE en retard, rien de surprenant.
Chrome a de l'avance :)
db77
Messages postés
2
Date d'inscription
mercredi 3 mai 2006
Statut
Membre
Dernière intervention
19 juillet 2008
4 avril 2013 à 12:59
@DIVIL : tu dois avoir la version 0.3 car j'utilise la 0.4b et elle fonctionne sous IE, FireFox et Chrome.
divil
Messages postés
22
Date d'inscription
mercredi 18 octobre 2000
Statut
Membre
Dernière intervention
9 décembre 2005
2 avril 2013 à 21:58
j'ai trouvé une piste sur :
http://www.codeproject.com/Articles/4755/Input-mask-a-script-that-automatically-enters-a-sp

rien de comparable avce maskedit, mais les / des dates s’incrémentent bien au fur et à mesure de la saisie.

testé avec Firefox 20 et IE10.

reste à forcer la saisie de chiffres et à vérifier la cohérence de la date saisie avant validation du formulaire ...

à suivre.
Afficher les 48 commentaires
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)