Controler une saisie avec un masque

Version imprimable

24/10/2007, 11h04
marinew

Controler une saisie avec un masque

Bonjour,

Je travaille actuellement avec MyFaces 1.1.5 + Tomahawk 1.1.6 + RichFaces 3.1.0.

Je cherche un composant du type inputText ou quelque chose comme ça qui me permettrait de guider l'utilisateur dans la saisie de données avec un masque prédéfini.
Par exemple, si je définis le masque suivant pour une date : "99/99/9999"
Je voudrais que l'utilisateur voit apparaitre une zone de saisie contenant "__/__/____" et qu'il n'ait à taper que les chiffres, sans les "/", et ce d'une seule traite.

Quelqu'un sait-il comment je pourrais faire ça ?

J'ai trouvé un "plugin JQuery" ici, et j'ai vu qu'il existait un tag <rich:jQuery> dans la librairie RichFaces, mais je ne connais pas du tout JQuery.
Sauriez-vous me dire s'il est possible de faire quelque chose avec ça, et me mettre sur la voie ?

Merci d'avance.
24/10/2007, 11h18
anisj1m

pour la saisie des date je te propose le tag si je me rappelle bien
<inputcalendar> a toi de verifier
24/10/2007, 11h40
marinew

Merci pour cette suggestion. Il y a effectivement 2 composants Tomahawk : inputCalendar et inputDate.

Mais sauf erreur de ma part, ils ne proposent pas de saisie avec masque.
On peut ouvrir un calendrier dans une popup, mais cela ne convient pas dans mon cas. Et sinon, la saisie manuelle se fait par 3 zones distinctes :
- zone de saisie du jour
- liste déroulante pour choix du mois
- zone de saisie de l'année
=> Ce n'est vraiment pas pratique quand on doit saisir une date fréquemment et rapidement.

D'autres suggestions SVP ?

jQuery Masked Input

J'ai réussi à utiliser le plugin "Masked Input" de jQuery, avec le composant <rich:jQuery> disponible à partir de RichFaces 3.1.2.

Télécharger le plugin ici

Dans le <head> :

Code:

<script type='text/javascript' src='<%= request.getContextPath()%>/js/jquery.maskedinput-1.1.1.pack.js'></script>

Dans le <body> :
Code:

1 2 3 4 5 6 7 <t:inputText id="dateNaissance" value="#{monBean.dateNaissance}"> <f:convertDateTime pattern="dd/MM/yyyy"/> </t:inputText> <a4j:loadScript src="resource://jquery.js"/> <rich:jQuery selector="#monForm:dateNaissance" timing="onload" query="mask('99/99/9999')" />
Attention : le <t:input> doit se trouver AVANT le tag <rich:jQuery> dans la page.

Remarque : si j'utilise plutôt la commande suivante

Code:

<a4j:loadScript src="/js/jquery.maskedinput-1.1.1.pack.js"/>

ça ne fonctionne plus :

Code:

jQuery("#monForm\\:dateNaissance").mask is not a function

Autre lien sur jQuery Masked Input :
http://www.developpez.net/forums/sho...7&postcount=11