События Формы
Рассмотрим основные события форм: отправка формы, очистка полей, фокус элемента формы, потеря фокуса, события для input, select, checkbox и многое другое.
Содержание:
- события формы:
- отправка формы (submit);
- очистка формы (reset);
- невалидность формы (invalid);
- события элементов формы:
Событие отправки формы
Слушать событие отправки формы можно при помощи submit.
<form id="my_form">
<input type="text" plceholder="Введите текст">
<button type="submit">Отправить форму</button>
<button type="reset">Очистка полей формы</button>
</form>
Чтобы поймать событие отправки формы, используйте submit.
my_form.addEventListener("submit", () => {
console.log("Событие отправки формы")
})
Очистка полей формы
Событие очистки полей формы.
my_form.addEventListener("reset", () => {
console.log("Событие очистки полей формы")
})
Метод для очистки полей формы.
my_form.reset()
Невалидность полей формы
Событие invalid срабатывает при попытке отправить форму, когда одно или несколько полей формы неверно заполнены. Или не заполнены, когда поле имеет атрибут required.
my_form.addEventListener("invalid", (e) => {
console.log("Значения формы не валидны");
}, true)
Как реализовать проверку правильности ввода данных, можете прочитать в статье про валидацию input.
События input, textarea
На input и textarea можно слушать следующие события:
- input — событие ввода
- change — событие изменения input (срабатывает после изменения поля и потери фокуса);
- focus — выбор элемента, фокус;
- blur — потеря фокуса;
- select — выделение текста;
- keyup — событие отпускание кнопки;
- contextmenu — правый щелчок мыши.
<form class="form-events">
<input type="text" name="HTML">
<input type="text" name="JavaScript">
<textarea></textarea>
</form>
const inputs = document.querySelectorAll(".form-events input");
inputs.forEach(el => {
el.addEventListener("change", function () {
// ваш код
})
});
Посмотреть когда срабатывают основные события форм, можете ниже.
События select
Для элемента select можем отслеживать следующие события:
- change — выбор элемента из списка (option);
- focus — фокус на select;
- blur — потеря фокуса select.
<select id="my_select" name="События элемента select">
<option value="change">Выбор option</option>
<option value="focus">Фокус select</option>
<option value="blur">Потеря фокуса select</option>
</select>
my_select.addEventListener("change", () => console.log("Выбран пункт из списка select"));
В примере ниже посмотрите, когда какие события срабатывают для элемента формы select.
Если вам интересно как стилизуется select, вот ссылка на статью.
События checkbox / radio
Для checkbox / radio можно использовать следующие события:
- click — клик мыши по checkbox / radio;
- change — выбор чекбокса / radio кнопки;
<input type="checkbox" id="checkb">
<input type="radio" id="radio">
checkb.addEventListener("change", () => console.log(checkb.value));
radio.addEventListener("click", () => console.log(radio.value));
Здесь вам пригодятся знания, как проверить состояние чекбокса.
События range
Для input type range используют следующие события:
- change — происходит в момент отпускания кнопки;
- input — происходит в режиме реального времени.
<input type="range" id="range">
range.addEventListener("change", () => console.log(range.value));
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: