Enter text into TextInput by mask

Hello dear readers.

Not so long ago (in one of the flex-projects), it was necessary to display text in the input field (TextInput) in a specific format. For example, when entering a city phone number, we need to eventually display it as “(111) 22-33-44”, while the user needs to see the input template, for example, “(___) __-__-__” and accordingly oriented on it when using the field.





')

I was looking for solutions on the Internet, came across only one worthy implementation of the task - this is the MaskedTextInput component from Adobe ( link to google code , link adobe exchange ). But this solution also has its drawbacks:



1. The component uses only those fonts in which all characters are of equal width. If you use a different font in your project, then Courier will be used by default;

2. The width of the component is set automatically and equal to the length of the template;

3. The component does not support pasting text within Ctrl + V;

4. And of course there are some more trifles that are not worth mentioning.



So I decided to write my component (based on the standard TextInput) that meets all the requirements for me. What did I do?



My component supports all attributes of its superclass. And also has its own:



inputMask in which the input template is specified. The pattern uses English characters and some other characters:



# - number;

B - letter;

A - the letter you want to translate into upper case;

a - the letter to be translated into lower case;

* - any characters except numbers;

, - any characters except letters;

. - absolutely any characters.



The rest of the characters used in the template that are not reserved will be used as the characters entered by default.



Example templates (###) ### - ###, Aaaaaaaaaa, BBBBBBB, * ### AABBB. and so on.



blankChar contains the symbol of the visual display of the template; if it is not specified, the symbol “_” will be used by default.



text override method accepts and returns an unformatted value.



fulltext returns a value formatted according to a pattern.



The component supports pasting and writing from the clipboard. The keyboard shortcut Ctrl + X, Ctrl + C, Ctrl + V. Supports LEFT, RIGHT, DOWN, UP, PAGE_DOWN, PAGE_UP, HOME, END, DELETE and BACKSPACE keys.



You can use any font you like with any character sizes in it. Works with standard validators. It can have any width (if it is not less than the sum of the width of all the entered characters).



Here is a small example of the component and the link to the source of this source, unfortunately I was lost. In exchange, leave a link to the component



In the future I will add the possibility of shielding the characters of the template.



PS I will be glad to all comments and suggestions.