Главная Обратная связь Поможем написать вашу работу!

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Обработчики событий, связанные с объектом select



Как видно из формата оператора <SELECT>, рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange. События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.

Пример сценария, работающего со списком

При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. В данном примере рассматривается два списка. Первый из них предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно). Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка.

Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.

Листинг 3

<HTML> <HEAD> <TITLE>Работа со списками</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function Complete() { var szElement=""; szElement="Цвет: " + Sel.ColorList.options[Sel.ColorList.selectedIndex].value + " (" + Sel.ColorList.selectedIndex + ")" + "\nРазмер: " + Sel.SizeList.options[Sel.SizeList.selectedIndex].value + " (" + Sel.SizeList.selectedIndex + ")"; alert(szElement); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Работа со списками</H1> <FORM NAME="Sel"> <P>Выберите цвет:<P> <SELECT NAME="ColorList"> <OPTION VALUE=Черный SELECTED> Черный <OPTION VALUE=Белый> Белый <OPTION VALUE=Красный> Красный <OPTION VALUE=Оранжевый> Оранжевый <OPTION VALUE=Желтый> Желтый <OPTION VALUE=Зеленый> Зеленый <OPTION VALUE=Голубой> Голубой <OPTION VALUE=Синий> Синий <OPTION VALUE=Фиолетовый> Фиолетовый </SELECT> <P>Выберите размер:<P> <SELECT NAME="SizeList" SIZE=3> <OPTION VALUE=Стандартный SELECTED> Стандартный <OPTION VALUE=Большой> Большой <OPTION VALUE=Средний> Средний <OPTION VALUE=Маленький> Маленький <OPTION VALUE=Очень_маленький> Очень маленький </SELECT> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR> </TABLE> </FORM> </BODY></HTML>

 



Однострочное поле text

Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор <INPUT> с параметром TYPE, равным значению "text":

<INPUT TYPE="text" NAME="Имя_поля_text" VALUE="Значение" SIZE=Размер_поля onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события" onSelect="Обработчик_события">

Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.



С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Свойства объекта text

Сценариям JavaScript доступны три свойства поля редактирования как объекта класса text:

Свойство Описание
defaultValue Отражает состояние параметра VALUE
name Значение параметра NAME
value Текущее содержимое поля редактирования

 

Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.

Методы объекта text

Для объекта text определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.


Просмотров 246

Эта страница нарушает авторские права




allrefrs.ru - 2021 год. Все права принадлежат их авторам!