Доброе время суток. Сразу перейдем к делу, и отметим, что сегодня нашему внимаю, предстанет компонент
TextInput. Это однострочное текстовое поле, в определенном смысле практически полный аналог инструмента -
Text Tool. Ни говоря более, посмотрим, что может предоставить справочная система Flash о данном компоненте.
Перевод: Using Components > Components Dictionary > TextInput component > About the TextInput component
О компоненте TextInput
Компонент TextInput - однострочное текстовое поле, которое является надстройкой над объектом ActionScript
TextField. Данный компонент, как и прочие другие, позволяет использовать для оформления внешнего вида стили.
Если экземпляр заблокирован, то текст в нем будет иметь цветовую гамму согласно стилю disabledColor. Текст в
компоненте TextInput может быть отформатирован как HTML, а также имеется возможность маскировать введенный
пароль.
Компонент TextInput может быть активен для ввода или заблокирован. В последнем случае компонент не реагирует
на воздействия от мыши и клавиатуры. В активном состоянии компонент имеет фокус, выделение, и правила навигации
такие же, как и объект ActionScript TextField. Когда экземпляр TextInput обладает фокусом можно использовать
следующие клавиши для изменения состояния:
Клавиша
Описание
Клавиши позиционирования
Перемещает точку введения на один символ влево и вправо.
Shift+Tab
Перемещает фокус на предшествующий объект.
Tab
Перемещает фокус на следующий объект.
Предварительный просмотр для каждого экземпляра TextInput отражает изменения сделанные в параметрах
инспектора свойств или инспектора компонента. Выделение текста не отображается в среде проектирования, и
нельзя непосредственно ввести текст в компонент на сцене.
При использовании компонента TextInput в проекте его содержимое можно сделать доступным для программ чтения
с экрана. Для этого необходимо воспользоваться панелью Accessibility.
Перевод: Using Components > Components Dictionary > TextInput component > Using the TextInput component
Использование компонента TextInput
Вы можете использовать компонент TextInput в любом месте, где необходимо применение однострочного текстового поля.
Если же требуется многострочное текстовое поле, то для данных целей следует использовать компонент TextArea.
Например, компонент TextInput может быть использован в форме как поле для ввода пароля. Можно установить Листенер,
проверяющий количество введенных символов, и в случае ошибки он мог бы выводить соответствующее оповещение пользователю.
Параметры TextInput
Для каждого экземпляра компонента в инспекторе свойств или инспекторе компонента можно задать следующие параметры:
text определяет содержание компонента TextInput. Нельзя ввести символ перевода строки.
Значение по умолчанию - "" (пустая строка).
editable указывает, может, быть ли изменён текст компонента (true) или нет (false).
Значение по умолчанию является true.
password устанавливает режим пароля - маскирование введенного текста. Значение по
умолчанию false (текст отображается как есть).
Эти и другие свойства компонента TextInput могут быть изменены с помощью кода ActionScript.
Использование компонента TextInput в проекте
Следующая процедура объясняет, как добавить компонент TextInput к проекту в среде разработки. В
этом примере, компонент является полем для ввода пароля, с Листенером, определяющим введено ли нужное
количество символов.
Перетащите компонент TextInput с панели Components на сцену.
В инспекторе свойств сделайте следующее:
Введите имя экземпляра passwordField.
Оставьте параметр text пустым.
Установите параметр editable в true.
Установите параметр password в true.
Выберитесь кадр 1 на временной диаграмме, открыв панель Actions, введите следующий код:
textListener = new Object();
textListener.handleEvent = function (evt){
if (evt.type == "enter"){
trace("You must enter at least 8 characters");
}
}
passwordField.addEventListener("enter", textListener);
Этот код устанавливают слушателя события enter для экземпляра TextInput passwordField, который
оповещает пользователя о нужном количестве символов.
Как только текст будет введен в экземпляр passwordField, его значение можно получить следующим образом:
var login = passwordField.text;
Сводка класса TextInput, т.е. краткое описание всех свойств, методов и событий, в том числе и унаследованных,
прикреплено к данному выпуску как дополнительный материал. Для ознакомления просим пройти
сюда.
Мы же рассмотрим только свойства, методы и события, которые непосредственно принадлежат классу TextInput.
Событие TextInput.change
Как уже отмечалось, можно использовать
два вида синтаксиса для обработки событий. Мы естественно остановим свой выбор на модели Генератор-Листенеры.
Особенности этой модели нами были рассмотрены.
Данное событие возникает при изменении текста пользователем, причем уже после ввода символа. Следовательно,
его не следует использовать в качестве фильтра введенных символов, вместо этого необходимо воспользоваться
свойством TextInput.restrict. При изменении содержимого текстового поля с помощью кода событие
не возникает.
Объект, передаваемый функции обработчику, содержит два свойства:
target - путь к компоненту, в котором произведено изменение текста (пример, _level0.tc1)
type - тип события, содержит change
Пример использования:
function ch1(eventObj) {
for (var k in eventObj)
trace(k + ': ' + eventObj[k]);
}
tc1.addEventListener('change', ch1);
Событие TextInput.enter
Возникает, когда пользователь нажал клавишу Enter. Событие может быть использовано, например, в случае
имитации работы html-формы. Событийный объект содержит аналогичные свойства, только свойство type
будет иметь значение enter.
Пример совместного использования рассмотренных событий:
function ch1(eventObj) {
switch (eventObj.type) {
case 'enter':
trace('Отправка данных');
break;
case 'change':
trace('Текст в компоненте ' + eventObj['target'] + ' изменен');
}
}
tc1.addEventListener('enter', ch1);
tc1.addEventListener('change', ch1);
Переходим к свойствам компонента TextInput.
TextInput.editable
Как было уже сказано выше, отвечает за возможность изменения текста компонента пользователем.
Может принимать два значения: true - текст может быть изменен, false - не может быть изменен. По умолчанию true.
TextInput.hPosition
Данное свойство для меня так и осталось загадочным. В справочной системе говориться, что оно отвечает
за горизонтальное выравнивание текста в поле. Там же есть такой пример: myTextInput.hPosition = 0;
Попытки ввода других значений ни к чему не привели.
Возможно, кто-нибудь из читателей знает нюанс данного свойства. Если это так, то пишите
сюда.
TextInput.maxHPosition
Данное свойство предназначено только для чтения. У меня оно возвращало 0, возможно, поэтому попытки
модификации свойства рассмотренного выше ни давали никакого результата.
TextInput.length
Данное свойство также предназначено только для чтения. С помощью него можно узнать количество символов в
тексте компонента. Думаю, ни кого не удивит, что символ табуляции (\t) - один символ.
Пример: var length = myTextInput.length;
TextInput.maxChars
Устанавливает максимальное количество символов, которое может ввести пользователь. Однако с
помощью программного кода можно ввести текст, превышающий этот предел. Значение по умолчанию - null,
что означает отсутствие лимита на количество вводимых символов.
Пример: myTextInput.maxChars = 255;
TextInput.password
Уже не раз упоминавшаяся возможность компонента - режим пароля. Здесь все просто:
true - введенный текст маскируется (все символы будут иметь вид звездочки), false -
пользователя видит текст как есть.
Пример: myTextInput.password = true;
TextInput.text
Главное свойство, которое хранит текст компонента.
TextInput.restrict
Указывает набор символов, которые пользователь может вводить в текстовое поле. Значение по умолчанию
undefined. Если значение свойство равно пустой строке или undefined, то
пользователь может вводить любые символы.
Для составления нужного набора символов можно использовать следующие правила:
последовательно перечислить все символы myText.restrict = "0123456789,.";
использовать диапазон символов (диапазон высчитывается исходя из Unicode-коде граничных символов) myText.restrict = "0-9а-яА-Я";
совместное использование предыдущих двух пунктов myText.restrict = "0123А-Я";
обозначение символов как не приемлемых myText.restrict = "^0-9";
совместное использование приемлемых и не приемлемых символов (сначала должны идти приемлемые) myText.restrict = "A-z^rR";
обозначение символов через Unicode myText.restrict = "\u0030-\u0039"; // 0-9
экранирование специальных символов: \, ^, - (перед ними необходимо поставить символ
\, а так как он сам должен быть экранирован, то \\) myText.restrict = "\\^\\-\\\\"; // ^, -, \
(Более подробную информацию смотрите в справочной системе)
Так как собственных методов класс TextInput не имеет, будем подводить итоги. Данный компонент
хорошо подходит в качестве решения для однострочного текстового поля. Это объясняется тем, что он
содержит только необходимую функциональность, что естественно облегчает его использование.
На этом мы закончим сегодняшний обзор. До встречи...