Masked InputText how to??

I was looking JQuery and i found a nice plugin that allow set a Mask to a input text. For example:

Mask: (999)-999999
When the user write into the inputText, this only allow numbers and not letters in the mask format. This is not a post submit validator, in realtime its format the input. (123)-7845555

http://digitalbush.com/projects/masked-input-plugin

Its will be nice that we can have a mask attribute in ice:inputText that make the same. Something like this:

Code:

 <ice:inputText mask="$ 999.999" value="#{myBean.price} />

¿¿How to i can extend the actual inputText to add this feature?? I need some general steps to follow :D

[Edit]
The next article explain how to make a Javascript masked input control from scracth:
http://archive.devx.com/dhtml/articles/nz012402/nz012402-1.asp

[Edit 2]
I also found an old JIRA issues of this: http://jira.icefaces.org/browse/ICE-730

I also think that a component with this functionality is long overdue.

Sounds like a really neat idea for a component.

In the mean time, best I can think of is catching each keystroke and reformatting the value of the text field as the user types. This could get ugly as you would be doing a lot of work SERVER side while JQuery is all client side. Perhaps a good compromise would be to have a free form inputText with a formatted outputText next to it; as the user types into the inputText, you parse the input into your desired format (date, phone number, etc.) and print in the outputText what the submitted value will be.

Hope that gives you some ideas.

-Sean

PS: I've never tried it and I'm sure there would be a forum thread about this somewhere, but can you do client side JS (perhaps using JQuery) to format the value of the inputText client side (its just a DOM object after all) such that when the form gets submit, the formatted value is what is submitted. Sounds like something that could be hacked together, get the best of both worlds?

i was testing using another js lib that format text. Then i use the onkeydown event handler of InputText to call the formatter JS code. Something like this:

<ice:inputText onkeydown="return format(this);" ... />

The code is executed and "formatted" but something is wrong. Its only need more tests and later integrate format js function into the component render.

The first posting is quite old, but I'll ask although:
When there is a good jQuery Plugin, why do you want to have a component for it, why not just use the Plugin?

regards,
Tim

Good point. Looks like Marioko would have been happy with a general pointer on how to implement the JQuery functionality into the IceFaces component.

I'm sure you'd run into some complications trying to get the modified value to be the one submitted with auto-submit but if the inputText is in a regular submitted form should be doable.

-Sean

I really like icefaces but can't figure out why some of the simpler stuff like this is not built into the component...

it would be nice if it as simple as it is in Primefaces
http://www.jsfcentral.com/listings/A22053?link

I have used Masked Input on Icefaces components using JQuery and http://javascriptools.sourceforge.net/. It might not be DOM efficient but it works with out issues and JQuery makes it simple.

FYI: Masked Input elements are not simple as they look.

Please share, I am working to get this done. but I have had no luck with jQuery using the masked input plugin, it ended up causing an issue where no input could be typed at all.

I have also been trying mootools with Imask but have not been successful with that either.

A quick dirty example, would be GREATLY appreciated!
I am using icefaces 1.8.1

Ok I see how this works. Thanks for the suggestion! except how do you get the actual Id for the component?

I specify the ID as a value but icefaces prepends it with another value like 'j_id45:' If I hard code the value it does work fine but this can easily change? how do you get around that?

Ok I got it! you have to specify the form name then prepend it to the mask like
var dateMask1 = new DateMask("dd/MM/yyyy", "myform:_8ab185b2232a255a01232a2596fc0004");

Thanks again!

I did not relay on element id's because JSF generates ID and they keep changing. Instead I relay on element class attributes to get elements that needs be masked.

The reason why I used JQuery is because it has a nice feature called live it makes DOM parsing faster and easier and avoids duplicate event bindings.