How to use mask in input field in JSF 2 + RichFaces 4?

Question

I need to have some masks in my input fields in my form. I am trying to insert jQuery.js and jQuery.MaskedInput.js tags as code below:

 <h:head> <h:outputScript name="jquery-1.6.4.min.js" library="javascript" /> <h:outputScript name="jquery.maskedinput-1.3.js" library="javascript" /> <script> jQuery(function($){ $("#date").mask("99/99/9999"); $("#phone").mask("[phone]"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); }); </script> <title>TITLE</title> </h:head> <h:body> <h:form id="form"> <h:inputText id= "date" /> </h:form> </h:body> 

Don't do anything yet.

UPDATE With BalusC $("[id='form:phone']").mask("(99) 9999-9999"); it works great! (Thank you buddy). But I need to apply this mask to datatable:

 <script> jQuery(function($){ $("input.phones").mask("[phone]"); }); </script> <title>TITLE</title> 

  <h:form id="form"> <h:panelGrid columns="3"> <h:outputLabel for="phones" value="Telefone(s) :" /> <h:dataTable id="phones" value="#{profile.user.userPhones}" var="item"> <h:column> <h:inputText id= "phone" value="#{item.phone}" /> </h:column> <h:column> <h:commandButton value="Remove" action="#{profile.removePhone}"/> </h:column> <h:column> <rich:message id="m_phone" for="phone" /> </h:column> </h:dataTable> <h:commandButton value="Add" action="#{profile.addPhone}"/> </h:panelGrid> </h:form> 

Any idea?

Answer 1

JavaScript / jQuery runs in the browser and runs on the HTML DOM tree, which is generated by JSF and sent to the browser, it does not intercept the JSF component tree. Your $("#date") will not return anything since there is no element with this identifier in the HTML DOM tree. Open the page in your browser, right-click and select "View Source". You will see that it was actually generated as <input id="form:date"> , and not as <input id="date"> .

Instead, you should use the following selectors (note that : is an illegal character in CSS and therefore must be escaped):

 $("#form\\:date").mask("99/99/9999"); $("#form\\:phone").mask("[phone]"); $("#form\\:tin").mask("99-9999999"); $("#form\\:ssn").mask("999-99-9999"); 

or, without the need for an explicit exit:

 $("[id='form:date']").mask("99/99/9999"); $("[id='form:phone']").mask("[phone]"); $("[id='form:tin']").mask("99-9999999"); $("[id='form:ssn']").mask("999-99-9999"); 

Or, otherwise, just give them a class name:

 <h:inputText id="date" styleClass="date" /> <h:inputText id="phone" styleClass="phone" /> <h:inputText id="tin" styleClass="tin" /> <h:inputText id="ssn" styleClass="ssn" /> 

which is then more widely selected as follows, without the need to insert identifiers of possibly several input fields of the same type in the view, for example inside <h:dataTable> :

 $("input.date").mask("99/99/9999"); $("input.phone").mask("[phone]"); $("input.tin").mask("99-9999999"); $("input.ssn").mask("999-99-9999"); 

Answer 2

Using JSF and RichFaces I was able to resolve conflicting masks as follows:

 var $j = jQuery.noConflict(); window.onload = function () { $j(#{rich:element('parProcecessoNumProtocolo')}).mask('9999.999999/9999-99'); }