FRONT-END PRO. Занятие № 25

1.

FRONT-END PRO
Занятие № 25

2.

Свойства и методы формы
■ Формы и элементы управления(<input>) имеют множество специальных
свойств и событий
■ Формы в документе входят в специальную коллекцию document.forms. Это
именованная коллекция, мы можем использовать ее для получения формы как
через имя так и через порядковый номер. document.forms.formName,
document.forms[0]
■ Сокращенная форма записи – form.name. Тут имеется ввиду html атрибут
name. При таком обращении необходимо быть внимательным при изменении
атрибута name так как поле будет доступно по старому имени
■ Обратная ссылка – у любого элемента формы есть element.form

3.

Свойства и методы формы
■ input и textarea, их значение можно получить через свойство input
(string) или input.checked (boolean) для чекбоксов. Необходимо
использовать textarea.value вместо textarea.innerHTML потому что хоть
textaerea и хранит свое значение во вложенном HTML там храниться тот HTML
который был изначально а не текущее значение
■ select и option. <select> имеет 3 важных свойства:
seletct.options – коллекция из подэлементов <option>
select.value – значение выбранного в данный момент <option>
select.selectedIndex – номер выбранного <option>

4.

Свойства и методы формы
■ Итого получается три разных способа установить значение в <select>:
1) найти соответствующий элемент <option> и установить в
option.selected значение true
2) установить в select.value значение нужного <option>
3) установить в select.selectedIndex номер нужного <option>
■ В отличии от большинства других элементов управления у <select> могут быть
выбраны несколько вариантов одновременно если у него есть атрибут
multiple.
В таком случае для работы со значениями необходимо использовать первый
вариант – ставить и удалять свойство selected у подэлементов <option>

5.

Свойства и методы формы
■ new Option – конструктор для создания элемента <option>
■ new Option(text, value, defaultSelected, selected) где
text – текст внутри <option>
value – значение
defaultSelected – если true то ставится HTML-атрибут selected
selected – если true то элемент <option> будет выбранным

6.

Фокусировка: focus/blur
■ Элемент получает фокус когда пользователь кликает по нему или использует
клавишу Tab. Также есть HTML-атрибут autofocus – который устанавливает
фокус на элемент когда страница загружается
■ focus - вызывается в момент фокусировки
■ blur – когда элемент теряет фокус
■ Методы elem.focus()/blur() устанавливают/снимают фокус
■ Многие элементы по умолчанию не поддерживают фокусировку. Это конечно
зависит от браузера но гарантированно focus/blur будет работать с теми
элементами с которыми пользователь взаимодействует

7.

Фокусировка: focus/blur
■ <div>, <span>, <table> – по умолчанию не могут получить фокус так что
метод elem.focus() не работает для них а события focus/blur никогда не
срабатывают
■ Это можно изменить HTML-атрибутом tabindex. Любой элемент поддерживает
фокусировку если имеет этот атрибут. Значением же является порядковый номер
элемента, когда клавиша Tab используется для переключению между
элементами
■ Сначала идут элементы со значениями tabindex от 1 и выше в порядке
tabindex а затем элементы без tabindex типа <input>
■ Для совпадающих tabindex элементы перебираются в том порядке в котором
идут в документе

8.

Фокусировка: focus/blur
■ Также есть специальные значения tabindex:
0 – ставит элемент в один ряд с элементами без tabindex
-1 – позволяет фокусироваться на элементе только программно – иными
словами Tab работать не будет а elem.focus() будет
■ Свойство elem.tabIndex также будет давать такой же эффект
■ focus и blur не всплывают

9.

События: change, input, cut, copy,
paste
■ change – срабатывает по окончании изменения элемента. Для текстовых
<input> это означает что событие происходит при потере фокуса. Для других
элементов select, input type=checkbox/radio событие запускается
сразу после изменения значения
■ input – срабатывает каждый раз при изменении значения. В отличии от
событий клавиатуры оно работает при любых изменениях значений, даже если
они не связаны с клавиатурными действиями: вставка с помощью мыши или
распознавание речи. Событие input не происходит при вводе с клавиатуры или
иных действиях если при этом не меняется значение в текстовом поле. Событие
input происходит после изменения значения поэтому мы не может использовать
тут event.preventDefault()

10.

События: change, input, cut, copy,
paste
■ cut, copy, paste– эти события происходят при вырезании/
копировании/вставке данных. Они относятся к классу ClipboardEvent и
обеспечивают доступ к копируемым/вставляемым данным. Мы также можем
использовать event.preventDefault() для предотвращения действия по
умолчанию

11.

Отправка формы: событие и метод
submit
■ При отправке формы срабатывает событие submit, оно обычно используется
для проверки (валидации) формы перед ее отправкой на сервер или
предотвращения отправки
■ form.submit() – позволяет инциировать отправку формы из JS
■ Со стороны пользователя есть два основных способа отправить форму:
1) нажать кнопку с типом submit или image
2) нажать на Enter находясь на какому-нибудь поле
■ Интересный нюанс – при отправке формы по нажатию на Enter в текстовом
поле генерируется click на кнопке с типом submit
■ При отправке вручную при помощи form.submit() событие submit не
генерируется