Использование компонента TextInput

Компонент TextInput является однострочным текстовым компонентом, который представляет собой обложку для встроенного объекта ActionScript TextField. Если требуется добавить многострочное текстовое поле, используйте компонент TextArea. Например, можно использовать компонент TextInput в качестве поля для пароля в форме. Также можно настроить прослушиватель событий, проверяющий наличие достаточного количества символов в поле, когда пользователь покидает его с помощью клавиши Tab. Прослушиватель может показывать сообщение об ошибке, указывающее на необходимость ввода правильного количества символов.

Можно задать свойство textFormat с помощью метода setStyle() , чтобы изменить стиль текста, отображаемого в экземпляре TextInput. Компонент TextInput можно форматировать с помощью HTML или как поле пароля, маскирующее текст.

Взаимодействие пользователей с компонентом TextInput

Компонент TextInput можно включить или выключить в приложении. В отключенном состоянии TextInput не реагирует на мышь или клавиатуру. Включенный компонент следует тем же правилам получения фокуса, выделения и навигации, что и объект TextField в ActionScript. Когда экземпляр TextInput получает фокус, им можно управлять также с помощью следующих клавиш.

Клавиша

Описание

Клавиши со стрелками

Перемещают точку вставки на один символ влево или вправо.

Shift+Tab

Переводит фокус на предыдущий объект.

Табуляция

Переводит фокус на следующий объект.

Дополнительные сведения об управлении фокусом см. в описании класса FocusManager в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 и разделе « Работа с FocusManager ».

Интерактивный просмотр каждого элемента TextInput отражает изменения, которые были внесены в параметры в Инспекторе свойств или Инспекторе компонентов во время разработки. В интерактивном просмотре текст не выделяется. Кроме того, нельзя вводить текст в экземпляре компонента в рабочей области.

При добавлении в приложение компонент TextInput можно сделать доступным для программ чтения с экрана с помощью панели «Расширенный доступ».

Параметры компонента TextInput

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры разработки для каждого экземпляра компонента TextInput: editable , displayAsPassword , maxChars , restrict и text . Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях этих параметров см. в описании класса TextInput в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 .

Можно создать код ActionScript для управления этими и дополнительными параметрами компонента TextInput с помощью его свойств, методов и событий. Дополнительные сведения см. в описании класса TextInput в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 .

Создание приложения с компонентом TextInput

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

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент Label с панели «Компоненты» в рабочую область и введите следующие значения в Инспекторе свойств.

    • Введите имя экземпляра pwdLabel .

    • Введите 100 для значения ширины (W).

    • Введите 50 для значения Х.

    • Введите 150 для значения Y.

    • В разделе «Параметры» введите значение Пароль: для параметра text.

  3. Перетащите второй компонент Label с панели «Компоненты» в рабочую область и введите для него следующие значения.

    • Введите имя экземпляра confirmLabel .

    • Введите 100 для значения ширины (W).

    • Введите 50 для значения Х.

    • Введите 200 для значения Y.

    • В разделе «Параметры» введите значение Подтвердите пароль: для параметра text.

  4. Перетащите компонент TextInput с панели «Компоненты» в рабочую область и введите для него следующие значения.

    • Введите имя экземпляра pwdTi .

    • Введите 150 для значения ширины (W).

    • Введите 190 для значения Х.

    • Введите 150 для значения Y.

    • В разделе «Параметры» дважды щелкните значение параметра displayAsPassword и выберите true . В результате этого значение, введенное в текстовое поле, будет маскироваться звездочками.

  5. Перетащите второй компонент TextInput с панели «Компоненты» в рабочую область и введите для него следующие значения:

    • Введите имя экземпляра confirmTi .

    • Введите 150 для значения ширины (W).

    • Введите 190 для значения Х.

    • Введите 200 для значения Y.

    • В разделе «Параметры» дважды щелкните значение параметра displayA s Password и выберите true . В результате этого значение, введенное в текстовое поле, будет маскироваться звездочками.

  6. Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код ActionScript. 

    function tiListener(evt_obj:Event){ 
if(confirmTi.text != pwdTi.text || confirmTi.length < 8) 
{ 
        trace("Password is incorrect. Please reenter it."); 
}  
else { 
        trace("Your password is: " + confirmTi.text); 
} 
} 
confirmTi.addEventListener("enter", tiListener);

    Этот код создает прослушиватель события enter для экземпляра TextInput с именем confirmTi . Если два пароля не соответствуют или пользователь вводит меньше 8 символов, выводится сообщение «Пароль неверный. Введите его еще раз». Если пароли содержат по 8 символов или более и соответствуют друг другу, введенное значение отображается на панели вывода.

  7. Выберите «Управление» > «Тестировать ролик».

Создание компонента TextInput с помощью ActionScript

В следующем примере компонент TextInput создается с помощью ActionScript. Также создается экземпляр Label, чтобы попросить пользователя ввести свое имя. В примере задается свойство restrict компонента, чтобы использовались только заглавные и строчные буквы, точка и пробел. Также создается объект TextFormat для форматирования текста в компонентах Label и TextInput.

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент TextInput с панели «Компоненты» на панель «Библиотека».

  3. Перетащите компонент Label с панели «Компоненты» на панель «Библиотека».

  4. Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код ActionScript. 

    import fl.controls.Label; 
import fl.controls.TextInput; 
 
var nameLabel:Label = new Label(); 
var nameTi:TextInput = new TextInput(); 
var tf:TextFormat = new TextFormat(); 
 
addChild(nameLabel); 
addChild(nameTi); 
 
nameTi.restrict = "A-Z .a-z"; 
 
tf.font = "Georgia"; 
tf.color = 0x0000CC; 
tf.size = 16; 
 
nameLabel.text = "Name: " ; 
nameLabel.setSize(50, 25); 
nameLabel.move(100,100); 
nameLabel.setStyle("textFormat", tf); 
nameTi.move(160, 100); 
nameTi.setSize(200, 25); 
nameTi.setStyle("textFormat", tf);

  5. Для запуска приложения выберите команды «Управление» > «Тестировать ролик».