Masked TextItem
I detailed in a previous blog entry the desire for a masked edit field for SmartClient. After some consideration I decided to write a basic MaskedTextItem control. It is derived from the standard TextItem.
As you can see from the sample form on the right, it is very easy to case conversion, limit key entry to letters or digits and include literal values. Note that the phone number field is currently in edit mode.
The actual value saved can include the literal characters or not. So it is possible to have the date field saved as 01172008 but show in the mask as 01/17/2008. To include literals in the value set includeLiterals: true on the field.
The source for the control can be downloaded at MaskedTextItem.js.
[2009/01/16] The MaskedTextItem does not work in Safari. The reason is that the text box selections cannot be read or updated from SmartClient because these methods were previously not supported in earlier versions of Safari. It appears that Safari can now be supported (at least version 3.2.5 which I tested) so I have put in a request to Isomorphic to enable this support.
There are still changes required to MaskedTextItem that are specific to Safari once the get/setSelectionRange is supported. A new version will be made available at that time.
Hi, firstly I would like to thank you for the generous contribution of an interesting component. However it is disappointing to see that it deosn’t seem to work for me. I am using the latest 7.0 beta of smartclient and the masked items doesn’t work. The function setSelectionRange() doesn’t seem to exist anywhere.
Sorry about the above comment, it doesn’t work on safari which I used for testing. It works perfectly on IE
I haven’t used Safari before so I tested it myself and you are correct – it does not work.Looking at the SmartClient source there is no implementation of setting the current selection range nor retrieving it for Safari. It appears 7.0 beta does not support it either.My guess is that there is no API in Safari to do so at this point.
Thanks for the reply. Yeah, I suppose all the webkit based browsers, chrome included has quite a lot to catch up. Thanks for the great code and generous sharing again.
to use MaskedItem.jsinclude it in your file …after thatisc.defineClass(“dateMTI”,”MaskedTextItemeniac”); isc.dateMTI.addProperties({mask:”00/00/0000″});Thanks a lot.
Thanks for the useful tool. One question regarding the regex supported…is there any way to set ranges? For example, I have a mask which is [a-g]. I try to use it with MaskedTextItem but the brackets and hyphen are being taken literally.
@enairaThere is currently not a provision for handling a range for a specific character in the mask. All characters must meet a predefined regexp. With the code you could easily define a new mask character to represent your desired range as the processing does use regexp's.