Controler une saisie avec un masque

**marinew** · 24/10/2007, 11h04

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.

**anisj1m** · 24/10/2007, 11h18

pour la saisie des date je te propose le tag si je me rappelle bien
<inputcalendar> a toi de verifier

**marinew** · 24/10/2007, 11h40

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 ?

**marinew** · 24/10/2007, 15h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Dans le <body> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça ne fonctionne plus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Controler une saisie avec un masque

JSF Java

Vue hybride

Discussions similaires

Partager

Partager