RESTOR- От HTML до С++ |
HTML |
JavaScript |
CSS |
Flash MX |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » RESTOR- От HTML до С++ » Введение в JavaScript » 3. Лекция: Программируем формы
Текст в полях ввода
Поля ввода (контейнер INPUT типа TEXT) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, вводя в эти поля промежуточные значения переменных и свойств объектов.
В данном примере первое поле формы — это поле ввода. Используя подстановку, мы присваиваем ему значение по умолчанию, а потом при помощи кнопки изменяем это значение.
Объект Text (текстовое поле ввода) характеризуется следующими свойствами, методами и событиями:
Свойства объекта Text — это стандартный набор свойств поля формы. В полях ввода можно изменять только значение свойства value.
Обычно при программировании полей ввода решают две типовых задачи: защита поля от ввода данных пользователем и реакция на изменение значения поля ввода.
Защита поля ввода
Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus:
<FORM>
<INPUT SIZE=10 VALUE="1-е значение"
onFocus="document.forms[0].elements[0].blur();">
<INPUT TYPE=button VALUE=Change
onClick="document.forms[0].elements[0].value=
'2-е значение';">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В этом примере значение поля ввода можно изменить, только нажав на кнопки Change и Reset. При попытке установить курсор в поле ввода он немедленно оттуда убирается, и таким образом, значение поля не может быть изменено пользователем.
Изменение значения поля ввода
Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange:
<FORM METHOD="post" onSubmit="return false;">
<INPUT SIZE="15" MAXLENGHT="15" VALUE="Тест"
onChange="window.alert(document.forms[0].elements[0].value);">
<INPUT TYPE="button" VALUE="Изменить"
onClick="document.forms[0].elements[0].value='Change';">
</FORM>
Если установить фокус на поле ввода и нажать Enter, ничего не произойдет. Если ввести что-либо в расположенное выше поле ввода, а потом нажать на Enter, то появится окно предупреждения с введенным текстом (для Netscape Navigator) или ничего не произойдет (для Internet Explorer последних версий). Если вы используете Internet Explorer последних версий, то окно предупреждения появится только после установки фокуса вне поля ввода. Это следует прокомментировать следующим образом: во-первых, обработчик onChange вызывается только тогда, когда ввод в поле закончен. Событие не вызывается при каждом нажатии на кнопки клавиатуры при вводе текста в поле. Во-вторых, обработчик события не вызывается при изменении значения атрибута VALUE из JavaScript-программы. В этом можно убедиться, нажав на кнопку Change - окно предупреждения не открывается. Но если ввести что-то в поле, а после этого нажать на Change, окно появится.
Отметим, что он работает по-разному для Internet Explorer и Netscape Navigator, а именно по-разному обрабатывается событие onChange. Для Internet Explorer при любом изменении поля событие обрабатывается незамедлительно, для Netscape Navigator — после потери фокуса активным полем.
Списки и выпадающие меню
В данном случае речь пойдет о выпадающих меню в контексте форм, а не в контексте слоев и технологии CSS.
Одним из важных элементов интерфейса пользователя является меню. В HTML-формах для реализации меню используются поля типа select (контейнер SELECT, который, в свою очередь, вмещают в себя контейнеры OPTION). Эти поля представляют собой списки вариантов выбора. При этом список может "выпадать" или прокручиваться внутри окна. Поля типа select позволяют выбрать из списка только один вариант, либо отметить несколько вариантов. Для управления полями типа select в JavaScript существуют объекты Select и Option.
Эти объекты характеризуются следующими свойствами, методами и событиями:
Мы не будем описывать все свойства, методы и события этих двух объектов. Остановимся только на типичных способах применения их комбинаций. Несмотря на то, что объект Option в нашей таблице находится ниже, что отражает его подчиненное по отношению к Select положение, начнем с описания его свойств и особенностей.
Объект Option
Объект Option интересен тем, что в отличие от многих других объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект Option:
opt = new Option([ text, [ value,
[ defaultSelected, [ selected ] ] ] ]);
где:
text — строка текста, которая размещается в контейнере <LI> (<LI>текст);
value — значение, которое передается серверу при выборе альтернативы, связанной с объектом Option;
defaultSelected — альтернатива выбрана по умолчанию(true/false);
selected — альтернатива выбрана(true/false).
На первый взгляд не очень понятно, для чего может понадобиться программисту такой объект, ведь создать объект типа Select нельзя и, следовательно, нельзя приписать ему новый объект OPTION. Все объясняется, когда речь заходит об изменении списка альтернатив встроенных в документ объектов Select. Делать это можно, так как изменение списка альтернатив Select не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах, путем программирования обычных меню (options[]).
При программировании альтернатив (объект Option) следует обратить внимание на то, что среди свойств Option нет свойства name. Это означает, что к объекту нельзя обратиться по имени. Отсутствие свойства объясняется тем, что у контейнера OPTION нет атрибута NAME. К встроенным в документ объектам Option можно обращаться только как к элементам массива options[] объекта Select.
options[]
Массив options[] — это свойство объекта Select. Элементы этого массива обладают теми же свойствами, что и объекты Option. Собственно, это и есть объекты Option, встроенные в документ. Они создаются по мере загрузки страницы браузером. Программист имеет возможность не только создавать новые объекты Option, но и удалять уже созданные браузером объекты:
<FORM NAME=f0>
<SELECT NAME=s0>
<OPTION>Первый вариант
<OPTION>Второй вариант
<OPTION>Третий вариант
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
onClick="document.f0.s0.options[document.f0.s0.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В данном примере при загрузке страницы с сервера определено три альтернативы. Они появляются, если выбрать поле select. После нажатия на кнопку удаления последнего варианта ("Delete last option") остается только две альтернативы. Если еще раз нажать на кнопку удаления альтернативы, останется только одна альтернатива и т.д. В конечном счете, вариантов может не остаться вообще, т.е. пользователь лишится возможности выбора. Кнопка Reset показывает, что альтернативы утеряны бесследно, так как после нажатия на эту кнопку содержание поля SELECT не восстанавливается.
Теперь, используя конструктор Option, сделаем процесс обратимым:
function def_f1()
{
document.f1.s1.options[0] = new Option("вариант Один","",true,true);
document.f1.s1.options[1] = new Option("вариант Два");
document.f1.s1.options[2] = new Option("вариант Три");
return false;
}
...
<FORM NAME=f1 onReset="def_f1();">
<SELECT NAME=s1>
<OPTION>вариант Один
<OPTION>вариант Два
<OPTION>вариант Три
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
onClick="document.f1.s1.options[document.f1.s1.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В данном случае мы обрабатываем событие reset (контейнер FORM). При этом создаем новые объекты типа Option и подчиняем их объекту Select. При этом первый элемент массива должен быть выбран по умолчанию, чтобы смоделировать поведение при начальной загрузке страницы.
В HTML-формах нельзя реализовать подменю. JavaScript позволяет обойти это ограничение и выполнить замену путем программирования поля select.
Вы здесь » RESTOR- От HTML до С++ » Введение в JavaScript » 3. Лекция: Программируем формы