8 Replies Latest reply on Feb 17, 2008 10:02 AM by Allan Wojcik

    Component to control input with a given mask

    Marine Wacheux Newbie

      Hello,

      I am working with MyFaces 1.1.5 + Tomahawk 1.1.6 + RichFaces 3.1.0.

      I am looking for an inputText component that will control user input with a mask.
      For example, if I define the following mask : "99/99/9999"
      Then the user will see an input field containing "__/__/____"
      and when he will type in this field, he will only have to type numbers, without having to type "/" characters.

      Does anybody know how I could do that ?

      I found a "JQuery plugin" at http://digitalbush.com/projects/masked-input-plugin, and I found <rich:jQuery> tag in RichFaces library. But I never used JQuery.
      Could you tell me if it is possible to do something with this, and put me on the road or give me an example ?

      Thanks.

        • 1. Re: Component to control input with a given mask
          Marine Wacheux Newbie

          OK, here is how to use "Masked Input" jQuery plugin with <rich:jQuery> component that is available since RichFaces 3.1.2.

          Download the plugin here : http://digitalbush.com/projects/masked-input-plugin"

          In html head :

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


          In html body :
          <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')" />
          


          Warning : I had to put <t:input> BEFORE <rich:jQuery> in the page.


          There remain one problem :

          If I use the following command instead of the other one
          <a4j:loadScript src="/js/jquery.maskedinput-1.1.1.pack.js"/>
          


          I have the following JavaScript error :
          jQuery("#monForm\\:dateNaissance").mask is not a function


          But when I look at generated HTML, the JavaScript is correctly inserted in head.
          Any idea about why this doesn't work ?
          Could it be a bug ? Or a problem in order in which things are done by RichFaces ?


          • 2. Re: Component to control input with a given mask
            Adrian Mitev Master

            Very useful. I wonder if there is such thing for prototype.

            • 3. Re: Component to control input with a given mask
              Sergey Smirnov Master

              1. you do not have to define <a4j:loadScript src="resource://jquery.js"/> explicitly. It is already there.

              2. it should be:
              selector="#dateNaissanc"
              or
              selector="#monForm\\:dateNaissance"
              but not
              selector="#monForm:dateNaissance"

              3. put your <a4j:loadScript src="/js/jquery.maskedinput-1.1.1.pack.js"/> somewhere after your <rich:jQuery>

              • 4. Re: Component to control input with a given mask
                Marine Wacheux Newbie

                Hello,

                Thanks for your help SergeySmirnov, and sorry for answering only now !
                I just realized that I don't receive mail when someone answer to my posts !

                I will try your suggestion.

                • 5. Re: Component to control input with a given mask
                  Marine Wacheux Newbie

                  Hello,

                  Back to this subject. I had not time to try what you told me, SergeySmirnov, until today.

                  FIRST : I just tested that, but I have a JavaScript error on page load :

                  $.fn has no properties
                  (no name)(function())jquery.maskedinput.js (line 32)
                  [Break on this error] $.fn.caret=function(begin,end){


                  Here is the code I'm using :
                  (...)
                   <t:inputText id="dateHeureRdv" value="#{priseRdvDepuisAgendaForm.dateHeureRdv}"
                   title="#{msgR.PriseRdvDepuisAgenda_dateHeureRdvToolTip}"
                   required="true" onfocus="activerMaskDate();">
                   <f:convertDateTime pattern="dd/MM/yyyy HH:mm" timeZone="#{sessionUtilisateurBean.timeZone}"/>
                   </t:inputText>
                  (...)
                  <rich:jQuery selector="#dateHeureRdv" timing="onJScall" query="mask('99/99/9999 99:99')" name="activerMaskDate" />
                  <a4j:loadScript src="#{ress.JS_MaskedInput}"/>
                  


                  I use RichFaces 3.1.3 GA and JQuery MaskedInput 1.1.2.


                  Wouldn't it have something to do with what is written in RichFaces doc :
                  "Remember to use jQuery() function instead of $(), as soon as jQuery works without conflicts with prototype.js." ?

                  You said (http://jboss.com/index.html?module=bb&op=viewtopic&t=125972) that you made it work nicely, without having to modify the plugin. Could you please tell me how you did it, or what is wrong in my example ?


                  SECONDLY : if I include manually the JS file, it works, so I was able to test it. Strangely, it works very well in some cases. But in other cases, I can't figure out why, there is a bug, and it become impossible to modify the input. For example, I use "99:99" mask.
                  - I type "10:20" in input => OK
                  - I go to another input, and come back to the first one.
                  - When I type in the first character, I should be able then to type the second. But instead of that, the caret is placed on last character or 2/3 characters later, so I will never be able to type in the second character !
                  Did you have such a problem ?
                  I feel the problem happen when the input doesn't exist at load time, but is introduced in page through a "reRender" ajax command...

                  Thanks !
                  Marine

                  • 6. Re: Component to control input with a given mask
                    Sergey Smirnov Master

                    No, I have no one problem with maskedinput when I tested it.

                    • 7. Re: Component to control input with a given mask
                      Marine Wacheux Newbie

                      Do you still have the code you tested ?
                      I don't understand : after doing tests today, I can't get it work anymore, even with old method (manually including scripts) !

                      The only thing I changed, is that I replaced RichFaces 3.1.2 by 3.1.3...
                      I would like to keep 3.1.3 and get masked-input work :-(

                      Are there some parameters to modify related to rich:jQuery component ?
                      Any help ?

                      Thanks

                      • 8. Re: Component to control input with a given mask
                        Allan Wojcik Newbie

                         

                        "marinew" wrote:
                        Do you still have the code you tested ?
                        I don't understand : after doing tests today, I can't get it work anymore, even with old method (manually including scripts) !

                        The only thing I changed, is that I replaced RichFaces 3.1.2 by 3.1.3...
                        I would like to keep 3.1.3 and get masked-input work :-(

                        Are there some parameters to modify related to rich:jQuery component ?
                        Any help ?

                        Thanks


                        I could not get it work too. Any other help?