Формы и их события
Навигация и обработка элементов форм
Управление фокусировкой
События форм
Обучающие курсы
Python Python ООП Структуры данных Django C/C++
Телеграм-каналы
Канал selfedu_rus Python Django Машинное обучение Java и С++
Наш канал

События форм

Это занятие начнем с рассмотрения событий

change, input, cut, copy, paste

для элементов формы input и select. Предположим, что у нас имеется вот такая форма:

<!DOCTYPE html>
<html>
<head>
<title>Уроки по JavaScript</title>
</head>
<body>
<form name="reg">
<p><input name="user" value="" />
<p><input name="sex" type="radio" checked />М 
<input name="sex" type="radio" />Ж
<p>Город: <select name="city">
<option>Москва</option>
<option>Санкт-Петербург</option>
<option>Тверь</option>
</select>
<p>Согласие <input name="agree" type="checkbox" />
<p><textarea name="about" rows="10" cols="30">О себе</textarea>
<p><input type="submit" name="submit">
</form>
<script>
</script>
</body>
</html>

Как правильно узнать: в какой момент следует считывать значение, например, из поля ввода user? Для этого используется событие change, возникающее после потери фокуса элементом. Например:

let frm = document.forms[0];
frm.user.onchange = function() {
            console.log(frm.user.value);
}

Теперь, при вводе значения и перемещения фокуса на следующий элемент, срабатывает событие change и в консоль выводится введенное значение. Причем, если значение в элементе не было изменено, то событие не сработает. Это принципиальное отличие события change от blur.

Если же повесить такой обработчик на элементы radio или checkbox, то оно будет срабатывать сразу при их изменении:

frm.sex[0].onchange = function() {
            console.log("sex 0: "+frm.sex[0].checked);
}
 
frm.sex[1].onchange = function() {
            console.log("sex 1: "+frm.sex[1].checked);
}
 
frm.agree.onchange = function() {
            console.log("agree: "+frm.agree.checked);
}

То же самое и для элемента select:

frm.city.onchange = function() {
            console.log(frm.city.selectedIndex);
}

Для поля ввода есть еще одно полезное событие

input

которое тут же срабатывает при изменении значения, например:

frm.user.oninput = function() {
         console.log(frm.user.value);
}

Если же значение не меняется, а мы просто перемещаем курсор по тексту или выделяем его, то это событие не происходит. Его удобно использовать, если нам нужно «на лету» анализировать введенные данные пользователем.

Действие этого события по умолчанию нельзя отменить методом:

event.preventDefault()

так как оно происходит уже после того, как браузер его обработал.

Следующие три события:

cut – при вырезании фрагмента в буфер обмена;
copy – при копировании фрагмента в буфер обмена;
paste – при вставке фрагмента из буфера обмена.

Реализуются следующим образом:

frm.user.oncut = function(event) {
            console.log("cut");
}
 
frm.user.oncopy = function(event) {
            console.log("copy");
}
 
frm.user.onpaste = function(event) {
            console.log("paste");
}

Причем, все они могут быть отменены методом

event.preventDefault();

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

submit

Следующее событие submit возникает при отправке формой запроса на сервер. Реализуется оно следующим образом:

frm.onsubmit = function(event) {
            alert("отправка формы");
}

В этом обработчике мы можем, например, проверить корректность заполнения данных формы и прервать отправку, при возникновении ошибок:

frm.onsubmit = function(event) {
     if(!frm.user.value) {
              event.preventDefault();
              console.log("поле user пустое");
     }
}

Также в JavaScript существует метод:

form.submit()

который отправляет данные на сервер, но только для формы, созданной непосредственно в скрипте. При этом событие submit не генерируется. Например:

<p onclick="sendForm()">Отправить форму</p>

и обработчик:

function sendForm() {
    let form = document.createElement('form');
    form.method = 'GET';
    form.innerHTML = '<input name="q" value="test">';
    document.body.append(form);
    form.submit();
}

Обратите внимание, если мы будем использовать форму документа:

reg.submit();

то этот метод работать не будет!

Итак, на этом занятии мы с вами рассмотрели метод submit и события:

change, input, cut, copy, paste, submit.

События форм

submit

Видео по теме