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

Не так давно (в одном из 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. Буду рад всем замечаниям и предложениям.