View Full Version : SOLVED: ComponentPlugin for TextField input masking

14 Dec 2011, 5:43 PM
Hi guys,

After wanting this for a long time, I've finally implemented a (modified) version of Digital Bush's Masked Input Plugin (http://digitalbush.com/projects/masked-input-plugin/) (or jQuery) as a ComponentPlugin for GXT. Please let me know if you find any issues with it.


Here's the documentation for it:

This is a masked input plugin for the ExtGWT (GXT) library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc.). A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user and an underscore ('_') character is used as a
placeholder to indicate user input text. By default, invalid text will be accepted and be subject to the field's validation methods (a field.setRegex() is automatically generated and applied to match the pattern you specified). You may choose to have the mask automatically reject invalid input as well. Please see the various accessor methods for details on configuration options.

The following mask definitions are predefined:

a - Represents an alpha character [A-Za-z]
9 - Represents a numeric character [0-9]
* - Represents an alphanumeric character [A-Za-z0-9]

Some examples of patterns you might use are:
(999) 999-9999

To create more advanced masks, you may use the question mark ('?') character to indicate that any part of the mask that follows it is optional. However, theremaining pattern must be either omitted or fully entered in order to be considered valid. You may use multiple question marks to indicate optional parts within an existing optional part.

For example:

99/99?/9999 will match 12/31 and 12/31/1999 but not 12/31/99.
99/99?/99?99 will match 12/31, 12/31/99 or 12/31/1999 but not 12/31/1 or 12/31/199.
(999) 999-9999? x9?9?9?9 will match a phone number with an optional 1 - 4 digit extension.

This was originally based on Digital Bush's Masked Input Plugin for jQuery but has been heavily modified.

15 Dec 2011, 10:38 AM
For some reason I am not able to "go advanced" when editing my post and can't change the file attachment. Here's an updated version which fixes a small bug with the right arrow caused by misplaced braces.