События композиции: не мешать вводу через IME

Назначение

При вводе через метод композиции пользователь может собирать символы из промежуточных состояний. Поиск или проверка не должны преждевременно считать каждое такое состояние завершённой строкой.

Как это работает

Создайте input id composition-query в своей странице. Пример пропускает обработку во время композиции и обрабатывает окончательное значение. Проверка последнего значения предотвращает повтор одного результата при соседних событиях.

Пример

const field = document.querySelector("#composition-query");
let composing = false;
let lastValue;
function processValue() {
  if (field.value === lastValue) return;
  lastValue = field.value;
  console.log("Обработать:", lastValue);
}
field.addEventListener("compositionstart", () => {composing = true;});
field.addEventListener("compositionend", () => {composing = false; processValue();});
field.addEventListener("input", event => {
  if (!composing && !event.isComposing) processValue();
});

Что должно получиться

Обычный ввод обрабатывается через input, составной — после завершения соответствующего состояния. Пример только выводит текст и не выполняет поиск или отправку данных.

Граница применения и частая ошибка

Синтетическая отправка compositionend не заменяет проверку настоящего метода ввода. Состав событий различается по браузерам и устройствам. Не меняйте value или положение курсора на каждом промежуточном шаге без специальной необходимости.

Самостоятельная проверка

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

Связанные материалы

• События
• Отложенная обработка ввода
• Клавиатура