How 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 try to insert the jQuery.js and jQuery.MaskedInput.js as show in the 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("(999) 999-9999");
           $("#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>

BUt nothing so far.

UPDATE With BalusC $("[id='form:phone']").mask("(99) 9999-9999"); it works fine! (thanks dude). But I need apply this mask in a datatable :

<script>
    jQuery(function($){
       $("input.phones").mask("(999) 999-9999");
   });
</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 browser and works on the HTML DOM tree which is generated by JSF and sent to the browser, it does not intercept on the JSF component tree itself. Your $("#date") will return nothing as there exist no element with that ID in the HTML DOM tree. Open the page in your browser, rightclick and View Source. You'll see that it's actually been generated as <input id="form:date">, not as <input id="date">.

You should instead use the following selectors (note that : is an illegal character in CSS and should thus be escaped):

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

or, without the need for explicit escape:

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

Or, alternatively, just give them a classname:

<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 can then more generically be selected as follows without the need for fiddling with IDs of possibly multiple input fields of the same type in the view, such as inside a <h:dataTable>:

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