Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые пер...
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #15: Программируем формы Страницы: « 1 2 3 вопросы »

Текст в полях ввода

Поля ввода (контейнер INPUT типа TEXT) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, вводя в эти поля промежуточные значения переменных и свойств объектов.

<FORM>Число гипертекстовых ссылок:
<INPUT SIZE=10 MAXLENGHT=10 VALUE="&{document.links.length};">
до момента обработки формы.
<INPUT TYPE=button VALUE="Число всех гипертекстовых ссылок в документе" onClick="window.document.forms[0].elements[0].value=document.links.length;">
<INPUT TYPE=reset VALUE="Установить по умолчанию">
</FORM>

В данном примере первое поле формы — это поле ввода. Используя подстановку, мы присваиваем ему значение по умолчанию, а потом при помощи кнопки изменяем это значение.

Объект Text (текстовое поле ввода) характеризуется следующими свойствами, методами и событиями:

Свойства Методы События
  • defaultValue
  • form
  • name
  • type
  • value
  • blur()
  • focus()
  • select()
  • onBlur
  • onChange
  • onFocus
  • Свойства объекта Text — это стандартный набор свойств поля формы. В полях ввода можно изменять только значение свойства value.

    Обычно при программировании полей ввода решают две типовых задачи: защита поля от ввода данных пользователем и реакция на изменение значения поля ввода.

    Защита поля ввода

    Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus:

    <FORM>
    <INPUT SIZE=10 VALUE="1-е значение " onFocus="document.forms[1].elements[0].blur();">
    <INPUT TYPE=button VALUE=Change onClick="document.forms[1].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 TIPE="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.

    Эти объекты характеризуются следующими свойствами, методами и событиями:

    Объект Select

    Свойства Методы События
  • form
  • length
  • name
  • options[]
  • selectedIndex
  • type
  • blur()
  • click()
  • focus()
  • onBlur
  • onChange
  • onFocus
  • Объект Option

    Свойства Методы События
  • defaultSelected
  • index
  • selected
  • text
  • selectedIndex
  • value
  • нет нет

    Мы не будем описывать все свойства, методы и события этих двух объектов. Остановимся только на типичных способах применения их комбинаций. Несмотря на то, что объект 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.

    length

    В примерах перепрограммирования options[] активно используется свойство объекта Select length. Оно определяет количество альтернатив, заданных для поля выбора. При помощи этого свойства можно удалять и восстанавливать списки.

    Определим посредством этого свойства число вариантов в предыдущем примере:

    <FORM NAME=f3>
    Число вариантов: <INPUT NAME=i0 SIZE=1 MAXLENGTH=1 onFocus="out();">
    </FORM>
    <SCRIPT>
    document.f3.i0.value=document.f1.s1.length;
    </SCRIPT>

    Обратите внимание на контейнер SCRIPT. Он расположен вслед за формой. Если его ввести раньше, то поля формы будут не определены, и в результате мы получим сообщение об ошибке.

    selectedIndex

    Свойство объекта Select, которое возвращает значение выбранного варианта, обозначается как selectedIndex.

    <FORM>
    Вариант:
    <SELECT NAME=s0 onChange="form.elements[1].value=selectedIndex;">
    <OPTION>Один
    <OPTION>Два
    </SELECT>
    Выбрали индекс:
    <INPUT SIZE=1 maxlength=1>
    </FORM>

    В этом примере обратите внимание на обработчики событий. Сам обработчик onChange мы опишем позже. Главное сейчас не это. Посмотрите, как мы обращаемся к элементам текущей формы. Во-первых, мы используем имя form. Оно указывает на объект Form, к которому принадлежит поле. Во-вторых, мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант. К этому моменту поле уже будет определено. В-третьих, мы ссылаемся на selectedIndex, не указывая полного имени формы. В данном контексте он относится к текущей форме.

    onChange

    Событие change наступает в тот момент, когда изменяется значение выбранного индекса в объекте Select. С изменением этого индекса в полях выбора единственного варианта на данной странице мы сталкивались неоднократно (selectedIndex и options[]). Данное событие обрабатывается JavaScript-программой, которая указывается в атрибуте onChange контейнера SELECT. В этом контексте интересно посмотреть, что происходит, когда мы имеем дело с multiple контейнером SELECT:

    <FORM>
    Набор канцелярских товаров:
    <SELECT
    onChange=
    "form.elements[1].value='';
    for(i=0;i<form.elements[0].length;i++)
    if(form.elements[0].options[i].selected==true)
    form.elements[1].value = form.elements[1].value+i;"
    multiple>
    <OPTION>Вариант 1
    <OPTION>Вариант 2
    <OPTION>Вариант 3
    <OPTION>Вариант 4
    <OPTION>Вариант 5
    <OPTION>Вариант 6
    <OPTION>Вариант 7
    </SELECT>
    Выбраны позиции:
    <INPUT NAME=s1 SIZE=7 MAXLENGTH=7 onFocus="form.elements[1].blur();">
    </FORM>

    Обратите внимание на то, что событие change имеет место тогда, когда происходит выбор или отмена альтернативы. Исключение составляет только тот случай, когда варианты при выборе последовательно отмечаются. В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

    selected

    Свойство selected объекта Option, на котором был построен пример с канцелярскими принадлежностями, может принимать два значения: истина (true) или ложь (false). В примере мы распечатываем индекс выбранной альтернативы, если значение свойства selected у объекта Option — true:

    if(form.elements[0].options[i].selected==true) ...

    Вообще говоря, свойство selected интересно именно в случае поля множественного выбора. В случае выбора единственного варианта его можно получить, указав на свойство selectedIndex объекта Select.

    text

    Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе:

    <SELECT onChange= "form.elements[2].value=
    form.elements[0].options [form.elements[0].selectedIndex].text;">
    </SELECT>

    В данном примере свойство text выводится в текстовое поле формы.

    value

    При передаче данных от браузера к серверу в запросе передается текст выбранной опции, если не было указано значение в атрибуте VALUE контейнера OPTION.

    Перейти к следующей странице »
    версия для печати: HTML, PDF
    Страницы: « 1 2 3 вопросы »
      Основные понятия
    form, onSelect, onChange, onClick, onSubmit, метод доступа, способ кодирования, программирование интерфейса, программирование меню.
     
      Информация о лекции
    В этой лекции рассматривается самая старая часть спецификации JavaScript – программирование HTML-форм. Разбираются различные методы обработки событий, перехват отправки данных на сервер и способы организации обмена данными при помощи форм и JavaScript-код
     
      Информация о главе
    Глава 3. JavaScript
    Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
     
      Учебники к курсу
    Основы web-технологий
    Основы web-технологий
    Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
    Интернет-университет информационных технологий - ИНТУИТ.ру.
    Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
    Dynamic HTML
    Айзекс С., BHV-Санкт-Петербург.
    Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
    Коржинский С.Н., КноРус.
    Практические занятия по HTML. Краткий курс
    Будилов В.А., Наука и техника.
    все книги по курсу »