voyent
Masked InputText how to??  XML
Forum Index -> Contributor's Corner
Author Message
Marioko

Joined: 14/Nov/2006 00:00:00
Messages: 125
Offline


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
burferd

Joined: 04/May/2006 00:00:00
Messages: 381
Offline


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


Joined: 05/Jun/2008 00:00:00
Messages: 89
Offline


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?
Marioko

Joined: 14/Nov/2006 00:00:00
Messages: 125
Offline


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.
tbuethe

Joined: 01/Jun/2008 00:00:00
Messages: 51
Offline


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
connolly.st


Joined: 05/Jun/2008 00:00:00
Messages: 89
Offline


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
cyberoblivion

Joined: 21/Jan/2009 00:00:00
Messages: 42
Offline


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
venu_dvmr

Joined: 30/Sep/2008 00:00:00
Messages: 58
Offline


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.
cyberoblivion

Joined: 21/Jan/2009 00:00:00
Messages: 42
Offline


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
cyberoblivion

Joined: 21/Jan/2009 00:00:00
Messages: 42
Offline


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?
cyberoblivion

Joined: 21/Jan/2009 00:00:00
Messages: 42
Offline


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!
venu_dvmr

Joined: 30/Sep/2008 00:00:00
Messages: 58
Offline


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.
 
Forum Index -> Contributor's Corner
Go to:   
Powered by JForum 2.1.7ice © JForum Team