Вводим текст в TextInput по маске

    image

    Здравствуйте уважаемые читатели.



    Не так давно (в одном из flex-проектов) понабилось отображать текст в поле ввода (TextInput) в определенном формате. Например, при вводе городского номера телефона нам необходимо в конечном итоге отобразить его следующим образом «(111) 22-33-44», при этом необходимо, чтобы пользователь видел шаблон ввода, например, «(___) __-__-__» и соответственно ориентировался по нему при использовании поля.



    Искал решения в интернете, наткнулся только на одну достойную реализацию задачи – это компонент MaskedTextInput от Adobe (ссылка на google code, ссылка adobe exchange). Но и у этого решения есть свои недостатки:

    1. Компонент использует только те шрифты, в которых все символы равной ширины. Если вы используете в своем проекте другой шрифт, то по умолчанию будет использован Courier;
    2. Ширина компонента задается автоматически и равна длине шаблона;
    3. Компонент не поддерживает вставку текста по средствам Ctrl+V;
    4. Ну и конечно есть еще немного мелочей, которые не стоят упоминания.

    Вот я и решил написать свой компонент (на основе стандартного TextInput) отвечающий всем необходимым для меня требования. Что же у меня получилось?

    Мой компонент поддерживает все атрибуты своего суперкласса. А так же имеет свои:

    inputMask в котором и указывается шаблон ввода. В качестве шаблона используются символы английского алфавита и некоторые другие символы:

    # – цифра;
    B – буква;
    A – буква которую нужно перевести в верхний регистр;
    a – буква которую нужно перевести в нижний регистр;
    * – любые символы кроме цифр;
    , – любые символы кроме букв;
    . – абсолютно любые символы.

    Остальные используемые символы в шаблоне не являющиеся зарезервированными будут использованы как символы, введенные по умолчанию.

    Пример шаблонов (###) ###-###, Aaaaaaaaaa, BBBBBBB, *###AABBB. и так далее.

    blankChar содержит символ визуального отображения шаблона, если он не указан, то по умолчанию будет использован символ «_».

    text переопределенный метод принимает и возвращает не отформатированное значение.

    fulltext возвращает отформатированное, согласно шаблону, значение.

    Компонент поддерживает вставку и запись из буфера обмена. Сочетание клавиш Ctrl+X, Ctrl+C, Ctrl+V. Поддерживает работу с клавишами LEFT, RIGHT, DOWN, UP, PAGE_DOWN, PAGE_UP, HOME, END, DELETE и BACKSPACE.

    Можно использовать любой понравившейся шрифт с любыми размерами символов в нем. Работает со стандартными валидаторами. Может иметь любую ширину (если она не меньше суммы ширины всех введенных символов).

    Вот небольшой пример работы компонента и ссылка на исходник данный исходник, к сожалению был мной утерян. В замен оставляю ссылку на компонент

    В будущем добавлю возможность экранирования символов шаблона.

    P.S. Буду рад всем замечаниям и предложениям.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 11

      +2
      хорошая работа, сохранил сорцы, спасибо
        0
        Спасибо, найдете баги пишите.
      • UFO just landed and posted this here
          0
          Можно скопировать сочетанием Ctrl+C не выделяя мышкой.
        • UFO just landed and posted this here
            +1
            Я нигде не писал что использовал данный компонент вместо HTML-форм. Мне данное решение нужно было для Flex-проекта.
            • UFO just landed and posted this here
                0
                Не стоит :) сейчас поправлю в топике.

                P.S. Соглашусь с тем, что использовать флеш формы на сайтах (не являющимися flash-сайтами) для ввода информации — это действительно извращение.
            • UFO just landed and posted this here
              0
              Я не помню, справляется ли стандартный валидатор с такими задачами. Это вроде-бы был родной функционал флекса.
                0
                Не могу сказать что стандартный валидатор справится именно с такого рода задачей. Например если использовать RegExpValidator то можно задать любую валидацию текстового поля, только в этом случае все символы которые должны быть по умолчанию придется вводить пользователю самостоятельно.

              Only users with full accounts can post comments. Log in, please.