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("[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>

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("[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 ?

Interpret

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("[phone]");
$("#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("[phone]");
$("[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("[phone]");
$("input.tin").mask("99-9999999");
$("input.ssn").mask("999-99-9999");

Sokol

Balusc, I follow your approach and help me, thanks dude. But I'm trying to understand the id generated by my datatable to use in the jQuery mask, could you please help me with that ? – Interpret

Ah, it's inside a datatable? You could use the ends-with selector $("[id$=date]"), but using a CSS class is much better (read: not error prone) for such case as you've multiple of them now. – Sokol

Thanks ! using $("[id$=date]") really solve my problem. You said to use CSS, but there's no attribute 'class' in <h:inputText />, should'nt be styleClass instead ? – Interpret

for the first time I help you , ayeeeeee! ;) (by the way, you have beatiful children, thanks for everything mate) – Interpret

@Sokol I have tried using your examples, the mask works but my method is not called on button click, any ideas? – Sochor

@Daniel: it's not clear what exactly you mean with "my method" in the context of the original question, this doesn't seem to be related to input masking. Please press Ask Question if you have a new question. – Sokol

Answer 2

Using JSF and RichFaces I managed to solve the conflict masks like this:

var $j = jQuery.noConflict();

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

Rozalin