[РЕШЕНО] Событие onchange вызывается как onblur

[OmegaBerkut]

Здравствуйте.
Сегодня я обнаружил забавную "не баг а фичу".

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

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

Теперь поиск работает как предполагается - одинаковая реакция на кнопку или enter, с учётом выбранной категории поиска - моё поле ввода передаёт значение в изначальное (скрытое) поле ввода, и если пользователь нажал enter - выполняется имитация нажатия на кнопку поиска, через эту кнопку всё работает как надо.

Но сегодня я обнаружил интересную вещь: после ввода и потери фокуса на элементе, не получается что либо изменить в моём поле ввода.
Полез в отладчик, и обнаружил, что в процессе набора текста не вызывается событие onchange, при этом решительно не понятно, каким образом восстанавливается уже введённый текст.
Когда я убрал фокус ввода - то сработал breakpoint, и "глаза полезли на лоб". Так должен работать onblur, а мне нужен классический onchange - то есть отслеживание изменений по мере ввода текста. Отслеживание на keydown/keypress/keyup не вариант, потому что в этих событиях ввод ещё не подтверждён, и начинаются танцы со спец-символами, позиционированием курсора ввода, и прочими бубнами.

Мне раньше даже пришлось прописать на enter дополнительную передачу значения в изначальное поле ввода, но тогда я не придал этому особого значения.

Всегда можно повесить setInterval, но даже у моего костыльно-ориентированного программирования есть предел.
По факту - setInterval не сможет полностью выполнить поставленную задачу, если скорость набора текста высокая (200+), даже если интервал задать 50 мс - проверено на себе.

Что по итогу - вопрос: как отслеживать уже выполненные изменения по мере набора текста ?

[Вадим Мошев]

✔ Этот пост помечен как решение ✔

Попробуйте использовать событие input. То есть, обработчик oninput. Тогда ваш код будет выглядеть как-то так:

текстовоеПоле.oninput = function() {
  сделатьВсё();
  закрыть()
}

Хотя, лучше назначать обработчики через addEventListener:

addEventListener('input', <тут пишете обработчик в виде функционального литерала или ссылки на функцию>)

[OmegaBerkut]

Сообщение от Вадим Мошев

использовать событие input. То есть, обработчик oninput

Спасибо помогло.
У меня это проще =)
В имеющейся конструкции поменял onchange на oninput в разметке.

P. S. В данном проекте этот костыль далёк от убойных, можно сказать - это рядовой костыль.
Сегодня три часа костылял отключение автоматической фильтрации поиска, которая завязана на сессию.
В итоге получилась сввязка из четырёх костылей, что бы отправить ajax на отключение фильтрации если пользователь пришёл не с текущей страницы.
Ну и после аякса (коих может быть несколько) - обновление страницы, через 500 милисекунд =)

[Вадим Мошев]

Хорошо, что получилось помочь.