12 Replies Latest reply on Jul 9, 2010 9:32 AM by sappo

How do you do a masked textbox?

oneworld95 May 22, 2009 5:03 PM

Is it possible to do a masked texbox? In other words, can you create a textbox that has placeholders that stay put while the person types? For example: a texbox will need to have values entered in this format 00:00:00 (minus the quotation marks). How do you do this? Thanks.

1. Re: How do you do a masked textbox?

amitev May 22, 2009 8:16 PM (in response to oneworld95)

Try jQuery Masked input.
Actions
2. Re: How do you do a masked textbox?

oneworld95 May 22, 2009 8:50 PM (in response to oneworld95)

Thanks, Adrian. One question: How do you reference the form fields from the JavaScript? For example, I have this field:

<h:inputText id="txtRunTime" value="#{asset.runTime}" />
How do I reference this field from the JavaScript of the jQuery?

jQuery(function($){ $("#date").mask("99/99/9999"); $("#phone").mask("(999) 999-9999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); });
Actions
3. Re: How do you do a masked textbox?

dxxvi May 25, 2009 6:05 AM (in response to oneworld95)
This is my 2cents if you use RichFaces

<rich:jQuery selector="#your_form:txtRunTime" query="mask('99/99/9999',{placeholder:' '})"/>

Not sure if it's right or wrong (haven't tested it yet).
Actions
4. Re: How do you do a masked textbox?

niox.nikospara.yahoo.com May 25, 2009 9:19 AM (in response to oneworld95)
Hello,

You need the client id of the form control; you can figure it out from the JSF component tree ids, but the best and painless way is to see the HTML source. Even better, use Firefox with the Firebug plugin.

So, if your <h:inputText> is within a form like this:

<h:form id="mainform"> <h:inputText id="txtRunTime" ... /> </h:form>

Its client id is mainform:txtRunTime. The following jQuery selector selcts it by id:

jQuery("#mainform\\:txtRunTime")
Actions
5. Re: How do you do a masked textbox?

oneworld95 May 26, 2009 2:07 AM (in response to oneworld95)

Thank you all for your answers. Very helpful and informative. Also, I didn't know how to reference RichFaces objects from JavaScript. It's not so bad :)
Actions
6. Re: How do you do a masked textbox?

nigelmen Jul 29, 2009 3:20 AM (in response to oneworld95)

This code is tested in the browsers support by the library and it's work as a charm

<h:inputText id="inputYear" value="#{myBean.year}" maxlength="4">
<rich:jQuery selector="#inputYear" query="mask('9999', {placeholder:' '})"
timing="onload"/>
</h:inputText>

I also change the placeholder that comes as default (_) for empty spaces.
Actions
7. Re: How do you do a masked textbox?

nigelmen Jul 29, 2009 3:23 AM (in response to oneworld95)

This code is tested in the browsers support by the library and it's working

<h:inputText id="inputYear" value="#{myBean.year}" maxlength="4">
<rich:jQuery selector="#inputYear" query="mask('9999', {placeholder:' '})"
timing="onload"/>
</h:inputText>

I also change the placeholder that comes as default (_) for empty spaces.

It is also possible to deactivate in the Jsf form (h:form) that each component add the form name by setting the h:form prependId property to false
Actions
8. Re: How do you do a masked textbox?

oneworld95 Jul 30, 2009 3:42 PM (in response to oneworld95)

Thanks. I'd been wondering how to use the rich:jQuery tag.
Actions
9. Re: How do you do a masked textbox?

oneworld95 Jul 30, 2009 5:22 PM (in response to oneworld95)
One issue: If I want the user to be able to enter a value such as 5.1 or 22.8, it only takes the latter value; the 5.1 doesn't stick when I leave the field -- it immediately blanks out the field. Here's what I've got:

<rich:jQuery selector="#.overtimeHours" query="mask('99.9', {placeholder:' '})" timing="onload"/>
Actions
10. Re: How do you do a masked textbox?

zabin7 Jul 9, 2010 5:35 AM (in response to oneworld95)

Hi

I was wondering how to use rich:jQuery. This topic is really helpful. I tried out the example given by Nicolas Duran. But it is not working for me. Do I need to add some js or libraries to my project. I am using jsf framework no seam. But I am very much aquainted with seam. So you can give me examples related to seam also.

Thanks in advance
Actions

11. Re: How do you do a masked textbox?

zabin7 Jul 9, 2010 6:14 AM (in response to oneworld95)

Got the result now.... I had to add two js files that is jquery.js and jquery.maskedinput.js in my project. And then in the jsp:

<script src="#{facesContext.externalContext.requestContextPath}/js/jquery.js" type="text/javascript"></script>
<script src="#{facesContext.externalContext.requestContextPath}/js/jquery.maskedinput.js" type="text/javascript"></script>

<h:inputText id="time" value="#{configMaster.time}" style="width:40px;" maxlength="5">
                    <rich:jQuery selector="#time" query="mask('99:99', {placeholder:' '})" timing="onload"/>
               </h:inputText>

It works wonder.... enjoy

12. Re: How do you do a masked textbox?

sappo Jul 9, 2010 9:32 AM (in response to oneworld95)

Hi,

for masking input I recommend using primefaces p:inputMask component. Check this out.
http://www.primefaces.org:8080/prime-showcase/ui/inputMask.jsf
Primefaces works very well together with richfaces and they got a lot of other useful component richfaces doesn't got yet.

//Kevin
Actions

Go to original post