MASKEDIT : MASQUES DE SAISIE !!! (DATES, NOMBRES, CHAINES...)
LocalStone
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
24 oct. 2003 à 19:33
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
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
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/17339-maskedit-masques-de-saisie-dates-nombres-chaines
https://codes-sources.commentcamarche.net/source/17339-maskedit-masques-de-saisie-dates-nombres-chaines
6 avril 2013 à 16:15
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.
4 avril 2013 à 20:00
j'ai téléchargé la version 0.4b, patché mon site et c'est OK pour IE 10 et Firefox 20 ...
nickel !
4 avril 2013 à 13:26
IE en retard, rien de surprenant.
Chrome a de l'avance :)
4 avril 2013 à 12:59
2 avril 2013 à 21:58
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.
2 avril 2013 à 20:20
toutefois, je viens de tester chez moi, avec IE10 et Firefox 19 ... pas mieux
au passage, je viens de voir que maskedit ne fonctionne pas non plus avec IE10 ...
galère ...
2 avril 2013 à 19:10
essayez
input type="date"
input type="datetime"
input type="time"
input type="email"
input type="color"...
http://www.w3schools.com/html/html5_form_input_types.asp#gsc.tab=0
Bien évidemment, le HTML5 et IE9... mon script détrompe-nigauds est toujours utilisé dans l'intranet de ma boîte, navigateur IE8/IE9.
Il est vrai que j'ai laché depuis longtemps codes-sources car bien bien bien occupé au boulot et en-dehors, et donc pas publié les versions compatibles FF.
De +, j'imagine qu'avec jQuery, il doit y avoir des trucs de ce genre bien puissants, je n'ai pas cherché.
2 avril 2013 à 17:53
J'utilise avec bonheur depuis plusieurs années ... mais sous IE ....
Aujourd'hui que mon parc doit migrer sous Firefox ... je me rend compte que ça ne fonctionne pas avec ce navigateur ...
Dans la mesure ou je ne suis pas le premier à m'en rendre compte et que je vois que plusieurs ont essayé de solutionner ...
Quelqu'un aurait-il réussi ?
J'ai bien appliqué les modifications proposées par FRANUX, mais j'ai toujours le même soucis.
merci d'avance pour vos lumières
Didier
4 nov. 2010 à 23:22
Très intéressé par cet excellent script, j'ai moi aussi constaté qu'il ne fonctionnait pas sous firefox. Travaillant exclusivement sous linux et n'ayant pas trouvé de correctif sur les forums, il me fallait en apporter un. Après plusieurs tentatives, je pense que j'ai trouvé. Comme dans les messages précédent j'avais les mêmes erreurs "event is not defined" à la ligne 41 et 42.
Voila les modifications que j'ai apporté au fichier masks.js
Mask.prototype.attach = function (o)
{ if ((o.readonly null) || (o.readonly false))
{
o.java-script = new Function("evenement","return " + this.ref + ".isAllowKeyPress(evenement, this)");
o.java-script = new Function("evenement","return " + this.ref + ".getKeyPress(evenement, this)"); o.java-script new Function("this.value " + this.ref + ".format(this.value)");
}
}
Puis dans la source html et en prenant l'exemple du site il faut rajouter les évènements suivant au champ de saisie
D'après les différentes doc que j'ai lu, event ne se comporte pas pareil sous IE et sous firefox. Par analogie au langage PHP (pour ceux qui connaissent et parce que j'ai plus l'habitude de ce langage), sous IE event semble se comporter un peu comme un variable globale tandis que sous firefox il faut la transmettre dans une fonction.
Cordialement,
6 août 2010 à 15:57
An invalid day was entered.
Le jour est incorrect.
23 juin 2010 à 15:54
j'ai récuperé le code ca marche sous IE mais pas sous firefox
quelqu'un aurait-il une idée pour m'aider?
Merci
20 avril 2009 à 02:21
Le script ne fonctionne plus avec firefox 3 d'ailleur, je l'ai testé en ligne et pas de réponse.
Connaissez vous un autre script pour faire des masques sur les catactères numériques ?
event is not defined
onkeydown()masks.js (ligne 41)
[Break on this error] o.onkeydown = new Function("return " +....ref + ".isAllowKeyPress(event, this)");
masks.js (ligne 41)
event is not defined
onkeyup()masks.js (ligne 42)
[Break on this error] o.onkeyup = new Function("return " + this.ref + ".getKeyPress(event, this)");
masks.js (ligne 42)
ligne 91
window.document.frmExample is undefined
throwError()(2, "The value entered was not a number.\n\nLa valeur entrée n'est pas un nombre.", "TexteAuLieuNumerique")masks.js (ligne 91)
setNumber()("TexteAuLieuNumerique", undefined)masks.js (ligne 164)
format()("TexteAuLieuNumerique")masks.js (ligne 81)
onblur()masks.js (ligne 43)
[Break on this error] window.document['frmExample'].elements['erreur'].value = e;
13 mai 2008 à 16:54
tout d'abord merci pour ce script qui m'est bien
utile.
J'ai une question, est-il possible de limiter la saisie
de l'année à 4 chiffres car actuellement il n'y a pas
de limite ?
25 févr. 2008 à 20:11
format_phone="###-###-####"
oStringMask = null;
oStringMask = new Mask(format_phone, "string");
oStringMask.attach(document.resa.CL_PH_HOME);
et pour des pays qu'on connait pas le format d'être en mesure de l'enlevé le format
format_phone="j'accepte tous les caractères du clavier"
oStringMask = null;
oStringMask = new Mask(format_phone, "string");
oStringMask.attach(document.resa.CL_PH_HOME);
11 janv. 2008 à 16:12
19 nov. 2007 à 15:30
16 oct. 2007 à 16:57
cette source m'intéresse beaucoup, et fonctionne tres bien, sauf sur FF . je voulais savoir si quelqu un pouvais poster le code de la version multi-navigateur. ca serai super utile pour plein de monde je pense.
Merci. cordialement
18 juil. 2007 à 11:07
Comme promis, je reviens te donner de mes nouvelles. J'ai donc essayé d'incorporer la vérification à l'endroit que tu m'as indiqué. C'est OK ! Je ne l'ai toutefois pas insérée dans cette même déclaration, mais j'utilise cet appel pour appeler une autre fonction tout comme toi. Ce qui me permet de traiter d'autres caractères si besoin.
En te remerciant pour ta précieuse aide et te souhaitant toujours de bonnes vacances
À bientôt..
cordialement
16 juil. 2007 à 21:55
Bonne soirée et bonnes vacances et... merci !
Cordialement
16 juil. 2007 à 21:52
16 juil. 2007 à 21:44
Alors profite bien du soleil en attendant ;-) De mon côté il me semble de mémoire que le code que tu m'indiques me dit quelque choses. Yes, après vérification, effectivement tu ajoutes 3 nouvelles fonctions de cette manière ;-) Je regarderai tout cela demain ;-) En attendant je te remercie beaucoup et te dis à très bientôt. Je te tiens au courant...
bonne vacances
16 juil. 2007 à 21:28
Si mes souvenirs sont bons, dans mask.js, repère la fonction
Mask.prototype.attach = function (o)
il faut rajouter quelque chose du genre
o.onkeypress = new Function("event.keyPress=(event.keyPress==46)? 44 : event.keyPress;");
16 juil. 2007 à 21:17
Pour dire vrai, j'ai finalement réussi en fin d'après midi ! Cela n'est peut-être pas très élégant mais ça fonctionne et c'est bien là le principal. Comment ai-je procédé ?
1) j'ai modifié le script de façon à ce qu'il accepte la virgule comme séparateur de décimal et évidemment modifié le masque de saisie en conséquence. (ex : #_###,##). A partir de là, le masque accepte la virgule. Mais si l'utilisateur tape sur la touche du clavier numérique le . est forcément refusé. J'ai donc dû rajouter la ligne suivante,
2) Dans la balise du champ de formulaire INPUT j'ai ajouté l'événement Onkeypress="event.keyPress=(event.keyPress==46)? 44 : event.keyPress;". Ca fonctionne très bien !
Bien évidemment, ce controle n'est ajouté que dans un cas bien précis expliqué ci-dessous.
En fait le problème est légèrement plus complexe que cela car je travail sur un projet en .ASP qui gère le multi-langue et le formatage des données qui va avec. Donc selon la langue sélectionnée, telle ou telle version de script est généré à la volée au moment de la génération de la page avec les masques de saisie qui sont propre à la langue sélectionnée (ou devrais-je dire le pays). Ce qui donne par exemple pour les US #,##.##, FR #_##,##. Il en va de même pour les expressions régulières, j'en modifie le séparateur de décimal selon les besoins. Pour finir le traitement spécifique pour la france du point du clavier numérique qui se transforme en virgule est ajouté si besoin. Je fais des opérations similaires pour les dates.
Il ne me reste plus qu'à trouvé le bon endroit pour le placer dans ton script afin de centraliser le traitement. Ce qui évitera de rajouter systématiquement le contrôle onkeypress de la touche au niveau de la balise INPUT de saisie. La tâche me parait un peu ardue, mais je vais essayer ;-) Si tu as une idée, n'hésite pas à me le faire savoir ta coopération sera la bienvenue ;-)
Cordialement
16 juil. 2007 à 18:10
- si ta zone est utilisée dans un calcul javascript, elle ne sera pas reconnue comme un nombre ou alors tu auras sans les décimales
- à la saisie au pavé numérique, la décimal est un '.' et l'a toujours été. Les utilisateurs y sont habitués
- si tu renvoies "123,45" comme valeur (soumission du formulaire), il faudra faire la moulinette inverse (transformer la virgule en point) pour récupérer la valeur exacte (Double.parseDouble en java, je sais plus en PHP), c'est le même problème que si ta zone est utilisée dans un calcul javascript.
16 juil. 2007 à 09:47
Merci pour vos réponses
Cordialement
23 mars 2007 à 12:04
Ce code est vraiment super, j'en revais, Iubito l'a fait ! ;)
En revanche, j'ai comme un soucis, et je viens de passer une matiné a essayer de le resoudre. C'est pourquoi je viens vous l'exposer :
J'essaye d'attacher le mask date 'jj-mm-aaaa' a 2 champs dans le meme formulaire plus un autre dans un autre formulaire.
Mais il n'attache le masque que sur le premier champs déclaré
(sur l'exemple qui suit, ca ne marche que sur datedebut, mais si je permute datedebut et datefin, ca marchera sur datefin).
Ma fonction init :
function init(){
// Création du masque date jj-mm-aaaa
oDateMask = new Mask("jj-mm-aaaa", "date");
// Associer le oDateMask aux champs
oDateMask.attach(document.monform.datedebut);
oDateMask.attach(document.monform.datefin);
oDateMask.attach(document.fiche.date);
}
mes formulaires :
<form method='post' action='update.php' name='monform'>
</form>
<form method='post' action='fiche2.php' name='fiche'>
</form>
Quelqu'un a t'il une piste a me proposer ? Il me reste plus beaucoup de cheveux, et j'aimerai en garder un peu pour mon prochain soucis !
1 mars 2007 à 17:27
Aurais-tu un mask pour les heures en format hh:mm:ss ?
24 févr. 2007 à 19:25
MERCI
1 juin 2006 à 11:42
Bravo pour ton script !!!
il marche nickel sauf sous firefox
quelqu'un aurait-il une idée pour le faire tourner sous FF ?
Merci
3 nov. 2005 à 10:02
oui j'ai adapté le code pour multi-navigateur si tu le veux
anepou@free.fr
2 nov. 2005 à 22:21
2 nov. 2005 à 18:24
2 nov. 2005 à 17:32
2 nov. 2005 à 15:42
Bonne source.
Est-il possible de l'utiliser pour un textbox situé dans un datagrid??
Merci
2 nov. 2005 à 10:37
ce script est une pure merveille ! merci :)
toutefois, j'ai un léger soucis :/
Il marche nickel chrome sous EI, mais sous firefox impossible de le faire fonctionner
La console javascript de firefox me sort les erreurs suivantes :
Error: event is not defined
Source File: http://192.9.200.115/THOT/includes/js/masks.js
Line: 97
Error: event is not defined
Source File: http://192.9.200.115/THOT/includes/js/masks.js
Line: 98
Ce qui correspond dans le fichier à cela (keydown et keyup):
o.onkeydown = new Function("return " + this.ref + ".isAllowKeyPress(event, this)");
o.onkeyup = new Function("return " + this.ref + ".getKeyPress(event, this)");
Quelqu'un a t il pu faire marcher ce script pour firefox ou alors suis je tout seul dans ce cas ? :'(
Merci d'avance :)
Pierre
15 juin 2005 à 13:33
Bon dsl j'ai pas trop de temps, boulot oblige !
Mais je t'ai trouvé un petit patch pour corriger le tir :
rajoute ca dans masks.js :
//----- jointure du tableau des séparateurs pour calculer la taille réelle du mask ml2 (ds le cas de valeurs forcées)
var s2 = s.join();
var ml2 = m.length - (s2.length - (s.length + 1));
//----- si la taille du champ est supérieure à la taille du mask, reformatage
if (nv.length > ml2) { nv = nv.substring(0, ml2); }
juste avant ces deux lignes :
this.strippedValue (nv "NaN") ? "" : nv;
return this.strippedValue;
Et ensuite lorsque tu crée ton champ tu défini ton champ date de cette facon, en mettant la date voulue avant son mask :
// Création du masque date jj/mm/aaaa
oDateMask = new Mask("jj/mm/2005aaaa", "date");
// Création du masque date jj/mm/aa
oDateMask = new Mask("jj/mm/05aa", "date");
Voila j'espere que ca peut t'aider, mais encore une fois c une solution expresse :)
14 juin 2005 à 14:39
ce script est vraiment bien fait, encore merci.
j'ai une petite question : est il possible de forcer l'année sur ce script, je parle de l'année en cours bien evidement. Si quelqu'un pouvait m'aider j'en serais ravi.
merci d'avance et encore bravo
17 mai 2005 à 11:54
Sauf si c'est normal, je corrige et je t'envoie ça
17 mai 2005 à 10:43
16 mai 2005 à 18:56
iubito -chez- asp-php -point- net
16 mai 2005 à 17:11
Ce que je veux faire ce n'est pas modifier masks.js
parce que cela s'appliquerait partout.
Mais juste redéfinir le prototype au niveau d'une page.
Le problème c'est que je suis obligé de réécrire ce code dans la page :
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)");
}
}
et de changer le o.onblur
Ca marche évidemment mais y'a pas plus simple ?
Merci de ta réactivité ^^
ps : j'ai vu que tu n'avais pas le temps d'adapter ce code pour les autres navigateurs alors je l'ai fait
Veux tu que je t'envoie ca pour que tu le poste ?
16 mai 2005 à 16:06
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.
Plus d'infos là : http://www.asp-php.net/scripts/scripting/maskedit.php
16 mai 2005 à 14:09
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
16 mai 2005 à 14:09
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
28 oct. 2003 à 20:21
LocalStone
26 oct. 2003 à 11:15
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 !
26 oct. 2003 à 02:49
24 oct. 2003 à 19:33
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