События формы

focus

Элемент получает фокус при нажатии на нем мышкой, клавиши Tab или выбрав на планшете.

При фокусе на элементе мы можем подгрузить данные для автозаполнения или начать отслеживать изменения в них.

По умолчанию многие элементы не могут получить фокус. Например, если кликнуть по div, то фокусировка на нем не произойдет. Кстати, фокус может быть только на одном элементе в единицу времени и текущий элемент, на котором фокус, доступен как document.activeElement.

blur

Когда фокус исчезает с элемента или переключается на другой, например посетитель кликает в другом месте экрана, происходит событие blur.

При потере фокуса можно валидировать введенные данные.

Активировать или отменить фокус можно програмно, вызвав в коде одноименные методы elem.focus() и elem.blur() у элемента.

change

Происходит по окончании изменения элемента формы, когда изменение зафиксировано. Для input:text или textarea событие произойдёт не при каждом вводе, а при потере фокуса, что не всегда удобно.

Например пока вы набираете что-то в текстовом поле — события нет. Но как только фокус пропал, произойдет событие change. Для остальных же элементов, например select, input:checkbox и input:radio, оно срабатывает сразу при выборе значения.

input

Срабатывает только на текстовых элементах, input:text и textarea, при изменении значения элемента. Не ждет потери фокуса, в отличие от change.

В современных браузерах input — самое главное событие для работы с текстовым элементом формы. Именно его, а не keydown или keypress, следует использовать.

submit

Возникает при отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму у посетителя есть два способа:

• Нажать кнопку с type="submit"

• Нажать клавишу Enter, находясь в каком-нибудь поле формы

Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. В обработчике этого события можно проверить данные и выполнить действия по результатам проверки.

Ссылка на пример в Codepen.io