Селект в JavaScript можно установить двумя путями: поставив значение select.value, либо установив свойство select.selectedIndex в номер нужной опции:
select.selectedIndex = 0; // первая опция
Установка selectedIndex = -1 очистит выбор.
Список элементов-опций доступен через select.options.
Фокусировка: focus/blur
Говорят, что элемент «получает фокус», когда посетитель фокусируется на нём. Обычно фокусировка автоматически происходит при нажатии на элементе мышкой, но также можно перейти на нужный элемент клавиатурой – через клавишу Tab, нажатие пальцем на планшете и так далее.
Момент получения фокуса и потери очень важен.
При получении фокуса мы можем подгрузить данные для автодополнения, начать отслеживать изменения. При потере – проверить данные, которые ввёл посетитель.
Кроме того, иногда полезно «вручную», из JavaScript перевести фокус на нужный элемент, например, на поле в динамически созданной форме.
Событие focus вызывается тогда, когда пользователь фокусируется на элементе, а blur – когда фокус исчезает, например, посетитель кликает на другом месте экрана.
Методы focus/blur
Методы с теми же названиями переводят/уводят фокус с элемента.
Событие change
Событие change происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.
Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдет событие onchange.
<input type="text" onchange="alert(this.value)">
<input type="button" value="Кнопка">
Для остальных же элементов: select, input type=checkbox/radio оно срабатывает сразу при выборе значения.
Событие input
Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.
В современных браузерах oninput – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress следует использовать.
События cut, copy, paste
Эти события используются редко. Они происходят при вырезании / вставке / копировании значения.
К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение – это отмена соответствующей операции.
События изменения данных:
| Событие | Описание | Особенности |
| change | Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса. | В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также onclick-обработчик или onpropertychange. |
| input | Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от change. | В IE8- не поддерживается, в IE9 не работает при удалении символов. |
| propertychange | Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в event.propertyName. Используют для мгновенной реакции на изменение значения в старых IE. | В IE9 не срабатывает при удалении символов. |
| cut/copy/paste | Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт. | Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё староезначение, а новое недоступно. |
Формы: отправка, событие и метод submit
Событие submit возникает при отправке формы. Наиболее частое его применение – это валидация(проверка) формы перед отправкой.
Чтобы отправить форму на сервер, у посетителя есть два способа:
1. Первый – это нажать кнопку <input type="submit"> или <input type="image">.
2. Второй – нажать Enter, находясь на каком-нибудь поле.
Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать event.preventDefault() – тогда форма не отправится на сервер.
Метод submit
Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().
При этом само событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit(), то он выполнил все проверки.
Это используют, в частности, для искусственной генерации и отправки формы.