input, change и живой ввод

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

input срабатывает после любого изменения значения: набрали символ, стёрли его, вставили текст мышью, надиктовали голосом, выбрали дату в календарике. Событие всегда приходит после того, как value уже обновилось, — читать новое значение можно сразу.

change ждёт, пока правка закончится. Для текстового поля это значит: пользователь ушёл с поля или нажал Enter. Для чекбокса, радиокнопки, select и загрузки файла «закончилась» правка мгновенно, поэтому change там прилетает сразу за input. Отсюда простое правило: живая реакция — на input, тяжёлая работа вроде запроса на сервер — на change.

Событие	Когда срабатывает	Всплывает	Отменяемо
beforeinput	перед изменением значения	да	да
input	сразу после изменения	да	нет
change	когда правка завершена	да	нет
focus / blur	элемент получил / потерял фокус	нет	нет
focusin / focusout	то же самое, но всплывает	да	нет

js

const nick = document.querySelector("#nick");
const seen = [];

nick.addEventListener("input", () => seen.push(nick.value));

nick.value = "Ри";
console.log(seen.length);

nick.dispatchEvent(new Event("input"));
console.log(seen);

страница примера

Сначала предположите, что выведет код

разбор вывода
Присваивание value из кода молчит: ни input, ни change, поэтому после него массив пуст. Это не баг — иначе обработчик, правящий значение, зациклил бы сам себя. Нужен эффект — событие рассылают руками через dispatchEvent.

У чекбокса нечего «дописывать», поэтому клик даёт сразу оба события — сначала input, потом change. Метод click() устраивает настоящий клик, так что события здесь не поддельные.

js

const box = document.querySelector("#agree");
const log = [];

box.addEventListener("input", () => log.push("input:" + box.checked));
box.addEventListener("change", () => log.push("change:" + box.checked));

box.click();
console.log(log);

страница примера

Сначала предположите, что выведет код

value у любого поля — строка, даже у type="number". Числовое значение лежит отдельно, в valueAsNumber, и превращается в NaN, когда поле пустое или содержит мусор. У чекбокса и радиокнопки читать нужно не value (там лежит то, что уйдёт на сервер), а checked; у поля с файлами — files.

js

const age = document.querySelector("#age");
const agree = document.querySelector("#agree2");

console.log(typeof age.value);
console.log(age.valueAsNumber + 1);
console.log(agree.value);
console.log(agree.checked);

age.value = "";
console.log(Number.isNaN(age.valueAsNumber));

страница примера

Сначала предположите, что выведет код

Атрибут и свойство живут врозь: атрибут value в разметке — это начальное значение, а свойство value — текущее. После правки они расходятся, и это удобно: исходный текст всегда можно достать из defaultValue, чтобы откатить поле.

js

const city = document.querySelector("#city");
city.value = "Абу-Даби";

console.log(city.value);
console.log(city.getAttribute("value"));
console.log(city.defaultValue);

city.value = city.defaultValue;
console.log(city.value);

страница примера

Сначала предположите, что выведет код

Самый частый приём: в обработчике input перезаписать value очищенным вариантом. Работает с любым способом ввода — с клавиатуры, вставкой, автозаполнением, — потому что чинит уже готовое значение, а не отдельные нажатия. И, раз присваивание из кода событий не порождает, рекурсии не будет. В React тот же фильтр устроен иначе: value в обработчике не перезаписывают, а неподходящий ввод просто не пускают в состояние — это показывает статья «Управляемые поля: состояние вместо DOM».

js

const phone = document.querySelector("#phone");
let calls = 0;

phone.addEventListener("input", () => {
  calls += 1;
  phone.value = phone.value.replace(/[^0-9]/g, "");
});

phone.value = "a1-b2 c3";
phone.dispatchEvent(new Event("input"));

console.log(phone.value);
console.log(calls);

страница примера

Сначала предположите, что выведет код

У приёма есть цена: перезапись value сбрасывает каретку в конец строки. Пока пользователь печатает в конце, этого не видно, но при правке середины текста курсор будет прыгать. Лечится запоминанием selectionStart до правки и возвратом через setSelectionRange() после — либо переходом на beforeinput, который умеет не пускать символ вовсе.

beforeinput приходит до изменения значения и отменяется через preventDefault(). В event.data лежит то, что собираются вставить, в inputType — как именно (insertText, deleteContentBackward, insertFromPaste). Значение при этом не дёргается, и каретка остаётся на месте.

js

const pin = document.querySelector("#pin");

pin.addEventListener("beforeinput", (event) => {
  if (event.data !== null && /[^0-9]/.test(event.data)) event.preventDefault();
});

const letter = new InputEvent("beforeinput", { data: "a", cancelable: true });
pin.dispatchEvent(letter);
console.log(letter.defaultPrevented);

const digit = new InputEvent("beforeinput", { data: "7", cancelable: true });
pin.dispatchEvent(digit);
console.log(digit.defaultPrevented);

страница примера

Сначала предположите, что выведет код

focus и blur — исключение из общего правила: они не всплывают, повесить их на форму и ловить все поля разом не выйдет. Для этого есть близнецы focusin и focusout с той же семантикой, но всплывающие как обычные события.

js

const form = document.querySelector("#f");
const a = document.querySelector("#a");
const hits = [];

form.addEventListener("blur", () => hits.push("blur"));
form.addEventListener("focusout", () => hits.push("focusout"));

a.dispatchEvent(new FocusEvent("blur", { bubbles: false }));
a.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));

console.log(hits);

страница примера

Сначала предположите, что выведет код

Кто сейчас в фокусе, знает document.activeElement — если никто, там окажется <body>. Фокус можно поставить методом focus() и снять через blur(), но не на любой элемент: disabled-поля и обычные <div> без tabindex его не принимают.

js

const one = document.querySelector("#one");
const two = document.querySelector("#two");

// фокус ставим не во время загрузки, а следом: поставленный прямо
// во время загрузки, он в рамку примера не попадает, и сравнивать
// пришлось бы body с body
setTimeout(() => {
  one.focus();
  const afterOne = document.activeElement;

  two.focus();
  console.log(document.activeElement === afterOne);
  console.log(document.activeElement === two);
}, 50);

страница примера

Сначала предположите, что выведет код

Настоящие input и change всплывают, поэтому вешать обработчик на каждое поле незачем: достаточно одного слушателя на форме и event.target, чтобы понять, кто изменился. Поля, добавленные позже, начнут работать сами собой. У событий, созданных руками, всплытие по умолчанию выключено — это единственное место, где нужен флаг bubbles.

js

const form = document.querySelector("#signup");
const filled = new Set();

form.addEventListener("input", (event) => {
  if (event.target.value !== "") filled.add(event.target.name);
});

const mail = form.elements.mail;
mail.value = "a@b.c";
mail.dispatchEvent(new Event("input", { bubbles: true }));

console.log([...filled]);
console.log(form.elements.pass.value);

страница примера

Сначала предположите, что выведет код

Собрав такой обработчик, дальше несложно достроить привычное поведение формы: считать заполненные поля, включать кнопку отправки, показывать подсказки на input и запускать проверку на focusout — когда пользователь уже дописал и ушёл дальше.

input срабатывает после каждого изменения значения, change — когда правка завершена: у текстового поля при уходе с него или по Enter, у чекбокса, radio и select — сразу.
Присваивание value из кода не порождает ни input, ни change; нужно событие — рассылайте его сами через dispatchEvent.
value всегда строка: число берут из valueAsNumber, состояние флажка — из checked, исходный текст — из defaultValue.
Ограничение ввода проще всего делать перезаписью value в обработчике input (помня про сброс каретки) или отменой в beforeinput.
focus и blur не всплывают — для делегирования есть focusin и focusout, а текущий элемент лежит в document.activeElement.

1/3К полю привязан обработчик input. Дальше код делает field.value = "текст". Сколько раз вызовется обработчик?

2/3Какие из событий фокуса всплывают?

3/3Пользователь набрал в текстовом поле пять символов и нажал Tab. Что произошло?

Счётчик оставшихся символов

Рядом с полем есть <span id="left"> с числом 100. Сделайте так, чтобы при каждом изменении текста в нём оказывалось, сколько символов ещё можно ввести. Дописывать проверку длины не нужно — за ней следит атрибут maxlength.

js

const about = document.querySelector("#about");
const left = document.querySelector("#left");

// ваш код здесь

about.value = "Привет";
about.dispatchEvent(new Event("input"));
console.log(left.textContent); // должно стать "94"

страница примера

Сначала предположите, что выведет код

Единственный обработчик на input: он придёт и на набор с клавиатуры, и на вставку мышью, и на удаление.

jsлистинг · не запускается

about.addEventListener("input", () => {
  left.textContent = String(100 - about.value.length);
});

about.addEventListener("input", () => {
  left.textContent = String(100 - about.value.length);
});

Обработчик читает about.value уже после изменения — событие input всегда приходит следом за обновлением значения, поэтому длина считается по свежему тексту. На change счётчик бы ожил только при уходе с поля.

Код из четырёх цифр

Поле должно принимать только цифры и не длиннее четырёх: всё лишнее вычищается прямо во время ввода. А когда пользователь уходит с поля, в соседний <span> попадает текст «нужно четыре цифры», если цифр набрано меньше, и пустая строка, если всё в порядке.

js

const field = document.querySelector("#pincode");
const err = document.querySelector("#err");

// ваш код здесь

field.value = "1a2b3c4d5";
field.dispatchEvent(new Event("input"));
console.log(field.value); // должно стать "1234"

field.dispatchEvent(new FocusEvent("blur"));
console.log(err.textContent); // ""

страница примера

Сначала предположите, что выведет код

Чистка — на input, проверка — на blur: ругаться на неполный код во время набора было бы невежливо.

jsлистинг · не запускается

field.addEventListener("input", () => {
  field.value = field.value.replace(/[^0-9]/g, "").slice(0, 4);
});

field.addEventListener("blur", () => {
  err.textContent = field.value.length === 4 ? "" : "нужно четыре цифры";
});

field.addEventListener("input", () => {
  field.value = field.value.replace(/[^0-9]/g, "").slice(0, 4);
});

field.addEventListener("blur", () => {
  err.textContent = field.value.length === 4 ? "" : "нужно четыре цифры";
});

Присваивание value внутри обработчика input само событий не порождает, так что рекурсии не будет. Минус решения — каретка после перезаписи уезжает в конец строки; если поле правят из середины, стоит запомнить selectionStart и вернуть его через setSelectionRange() либо отсекать лишнее ещё в beforeinput.

input, change и живой ввод

Видеоразбор темы за 5–7 минут

input и change: два моментаКаждый символ против финального результата

valueСтрока, checked и valueAsNumber

Фильтр на летуЧистим значение прямо во время набора

focus, blur и кто в фокусеФокус не всплывает, focusout всплывает

Одна форма — один обработчикСлушаем форму, а не каждое поле

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Счётчик оставшихся символов

Код из четырёх цифр