Отслеживание изменений в текстовом инпуте на JavaScript

Быстрый ответ

Для реального отслеживания изменений применяется событие input на элементах <input>.

document.querySelector('#input').addEventListener('input', function(event) {
    console.log(event.target.value);
});

Этот код зарегистрирует каждое действие вроде ввода текста, удаления или вставки—моментально.

oninput против onchange: почему выбор важен

Событие input отличается от onchange. Последнее срабатывает, когда элемент теряет фокус, в то время как input реагирует на каждое действие моментально. Это обеспечивает непосредственную обратную связь, необходимую для интерфейсов, где требуется проверка, форматирование или фильтрация текста «на лету».

Для устаревших версий Internet Explorer применение событий oninput и onpropertychange давало схожие результаты. Сейчас же предпочтительнее следовать стандартам WHATWG HTML для обеспечения кроссбраузерной совместимости.

Визуализация

Представьте, что каждое нажатие клавиши в поле ввода — это нота в музыкальной композиции:

Поле ввода: [🎶]

Событие input "прислушивается" к этой мелодии:

inputField.addEventListener('input', function() {
    console.log('Прозвучала нота: 🎵');
});

С каждой нотой (нажатием клавиши) оркестр взаимодействия с пользователем доставляет нам мгновенные изменения:

| Нажатие клавиши | Событие сработало |
| ---------------- | ---------------- |
| А                | 🎵               |
| п                | 🎵               |
| п                | 🎵               |
| л                | 🎵               |
| е                | 🎵               |

Обработка исключительных ситуаций и создание универсальных решений

Обеспечение обратной совместимости

Если вам нужена максимальная совместимость, используйте подход поэтапного ухудшения для поддержки старых браузеров. Даже если они не могут воспользоваться всеми функциями, базовая функциональность должна быть сохранена.

let inputElement = document.querySelector('input');
let inputEventHandler = function(event) {
    console.log(event.target.value); // 👀 фиксируем ввод пользователя
};
if (inputElement.oninput === undefined) {
    // Старый добрый IE?
    inputElement.onpropertychange = inputEventHandler;
} else {
    inputElement.oninput = inputEventHandler;
}

Этот код проверяет поддержку события input. Если ее нет, то используется onpropertychange.

Подробнее об этом расскажет наш спикер на видео

Оптимизация отслеживания событий вставки

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

inputElement.addEventListener('paste', function(event) {
    // Тяжело ждать. Так считал Том Петти!
    setTimeout(() => console.log(inputElement.value), 0);
});

Применение события onpaste вместе с минимальной задержкой setTimeout позволяет отследить отображение вставленного текста в поле ввода.

Повышение производительности с дебаунсингом

Частый и многократный ввод может снижать производительность. Используйте дебаунсинг для оптимизации – задержку выполнения функции до момента, когда пользователь прекратит ввести текст.

let debounce = function(func, delay) {
    let inDebounce;
    return function() {
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => func.apply(this, arguments), delay);
    };
};

inputElement.addEventListener('input', debounce(function(event) {
    console.log(event.target.value);
}, 250));

Эта техника обеспечивает, что обработчик событий будет активирован только после короткого периода времени, который следует за остановкой ввода, тем самым освобождая системные ресурсы.

Устранение несоответствий работы с <textarea> в Safari

Для элементов <textarea> в Safari cобытие input может работать неправильно. Вместо него используйте событие textInput:

let textAreaElement = document.querySelector('textarea');
textAreaElement.addEventListener('textInput', function(event) {
    console.log(event.data);
});

Это дает точный контроль за текстовым вводом и верно отслеживает изменения.

Полезные материалы

1. Событие Input – Веб-API | MDN – Подробное руководство по использованию события input.
2. Дебаунсинг и троттлинг на примерах | CSS-Tricks – Различия и способы реализации дебаунсинга и троттлинга.
3. Введение в события JavaScript – Основы работы с событиями в JavaScript.
4. Делегирование событий – Примеры и преимущества делегирования событий.
5. jQuery: Как создать событие в текстовом поле, когда я закончил писать? – Stack Overflow – Решения от сообщества по отслеживанию изменений ввода.
6. Debounce: Как отложить исполнение функции в JavaScript – Подробно о дебаунсинге и вариациях.
7. HTML Стандарт – Официальная спецификация HTML для события input и связанных элементов.