Определяем, что делает пользователь в input — без таймеров и дебаунсов!

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

Шаг 1 — получаем поле:
const field = document.querySelector('#search');

Шаг 2 — определяем ввод символов (именно набор текста руками):
field.addEventListener('input', (e) => {
if (e.inputType === 'insertText') {
console.log('Пользователь печатает текст');
}
});

Шаг 3 — распознаём удаление:
field.addEventListener('input', (e) => {
if (e.inputType.includes('delete')) {
console.log('Пользователь удаляет текст');
}
});

Шаг 4 — ловим вставку из буфера обмена:
field.addEventListener('input', (e) => {
if (e.inputType === 'insertFromPaste') {
console.log('Вставка текста из буфера обмена');
}
});

Шаг 5 — определяем другие вставочные действия (автозамена, drop и т.д.):
field.addEventListener('input', (e) => {
if (e.inputType.startsWith('insert') &&
e.inputType !== 'insertText' &&
e.inputType !== 'insertFromPaste') {
console.log('Автозамена или другое вставочное действие');
}
});

Позволяет строить умные поля поиска, автосохранение, динамические подсказки и разные UX-ветки без debounce, таймеров и лишней логики.

Code Ready | #практика