-
1. Re: How do you do a masked textbox?
amitev May 22, 2009 8:16 PM (in response to oneworld95)Try jQuery Masked input.
-
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");
}); -
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).
-
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")
-
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 :)
-
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. -
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 -
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.
-
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
or22.8
, it only takes the latter value; the5.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"/>
-
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
-
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