Accueil > > > MASKEDIT : MASQUES DE SAISIE !!! (DATES, NOMBRES, CHAINES...)
MASKEDIT : MASQUES DE SAISIE !!! (DATES, NOMBRES, CHAINES...)
Information sur la source
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
- 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();">
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
Historique
- 25 août 2004 16:13:44 :
- 26 août 2004 07:09:01 :
- 29 novembre 2005 01:54:37 :
- - masque, maskedit, saisie, date, formatage dans les mots-clés
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Formatage de chaine javascript [ par shaft107 ]
slt à tousj'ai 4 petits pb,1) je voudrai en réalité changer le format de ma date après la saisie ex : l'utilisateur saisi 20092004 et moi je lui prése
masque de saisie [ par dorgulof ]
Dorgyje voudrai brider des jTextField en écriture de char (et les convertir automatiquement en majuscule) et la meme chose pour les int.quelle librair
Saisie de date en asp [ par breakdancer971 ]
Bonjour,j'utilise dreamweaverMxj'ai créé un formulaire ou l'on doit saisir des dates et lorsque je les enregistre quelque soit le format soit access o
masque saisie heure en java script [ par lotfi2052 ]
salut à tous, je suis un débutant en java script je cherche un code en javascript pour controler la saisie d'un champ heure avec le format hh:mm, de l
date dans formulaire [ par dlgforum ]
Bonjour, Voilà, j'ai un formulaire dans lequel je saisie une date et je souhaiterai un controle pour vérifier si cette date est bien entre deux dates.
Controle champ formulaire [ par flopad ]
Bonjour tout le monde, j'ai une page contenant un formulaire, je voudrais qu'on message d'alerte s'affiche lors de la validation si la date (code ci-d
Un masque de saisie pour l'heure avec fleche [ par Pixeloz ]
Bonjour, je cherche un script en javascript qui me permet d'avoir un champ (pour un formulaire) qui ressemble à ça : C'est pour controler la saisie de
comment formater lorsqu'on saisie une date et l'heure [ par machmacha ]
bonjour tout le monde,j'ai un petit problème sur le formatage d'un champ qui contient une date + l'heure j'expose mon problème: <img src="file:///C:
Interdire la saisie d'une date antérieur à la 1er date saisie [ par bruno3591 ]
Bonsoir, Je me sers d'un code java script pour afficher un calendrier qui permet de saisir une date au format Fr. J'ai un formulaire avec 2 champs
faire une redirection ... [ par thomas68500 ]
Bonjour a tous, J'ai essayer de faire une redirection quand le compteur est egal a 0 j 0 minute 0 secondes cela me fais une redirection... J'ai essay
|
Derniers Blogs
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|