Enter the text in the TextInput mask


    Hello dear readers.

    Not so long ago (in one of the flex-projects) I decided to display the text in the input field (TextInput) in a specific format. For example, when entering the landline phone number, we need to ultimately display it as follows: “(111) 22-33-44”, and it is necessary for the user to see the input template, for example, “(___) __-__-__” and accordingly guided by it when using the field.

    I searched for solutions on the Internet, I came across only one worthy implementation of the task - this is the component MaskedTextInput from Adobe ( link to google code , link adobe exchange ). But this solution 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 is equal to the length of the template;
    3. The component does not support inserting text using Ctrl + V;
    4. And of course there are some more little things that are not worth mentioning.

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

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

    inputMask which specifies the input template. As a template, the characters of the English alphabet and some other characters are used:

    # - number;
    B is the letter;
    A - letter to be converted to uppercase;
    a - letter to be lowercase;
    * - any characters except numbers;
    , - any characters except letters;
    . - absolutely any characters.

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

    Example templates (###) ### - ###, Aaaaaaaaaaa, BBBBBBBB, * ### AABBB. etc.

    blankChar contains the symbol of visual display of the template, if it is not specified, then the symbol "_" will be used.

    The text overridden method accepts and returns an unformatted value.

    fulltext returns the formatted value according to the template.

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

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

    Here is a small example of the component’s operation and a link to the source, this source, unfortunately, was lost by me. In return, I leave a link to the component.

    In the future I will add the ability to escape template characters.

    PS I will be glad to all comments and suggestions.

    Also popular now: