Как отследить изменение input, почему change не срабатывает?

Question

[Анатолий]

Как отследить изменение input? События click и keydown - не вариант.

<form id="a">
  <input type="text" id="b" readonly onchange="update(this.value)">
</form>

let form = document.getElementById('a');
let input = document.getElementById('b');

form.addEventListener('change', () => { console.log('refresh'); });
input.addEventListener('click', () => { input.value += '5'; });
input.addEventListener('change', () => { console.log('reload'); });

function update(c){
  console.log(c);
  console.log(input.value);  
}

https://codepen.io/workcode/pen/NWNZejw

Comments

[Ярослав Иванов]

У формы нет события change

[Анатолий]

Ярослав Иванов, это просто один из моих не работающих вариантов.
Основной вопрос: "Как отследить?"
click и keydown не вариант, так как изменение input происходят сторонним модулем, из которого нет возможности послать флаг.

[Ярослав Иванов]

Анатолий, input событие не работает?

[Анатолий]

Ярослав Иванов, не понял

[Ярослав Иванов]

Анатолий, со-бы-ти-е input

[Анатолий]

Ярослав Иванов, изменил в примере, можете проверить, у меня не срабатывает.

Answer 1

[Воващ]

input.addEventListener('input', () => { input.value += '5'; });

Comments

[Анатолий]

В чем ответ?
Это просто часть кода из моего примера для изменения input, в рабочем проекте, input изменяет сторонний модуль, доступа к которому нет.
Как я уже писал в первой и единственной строке вопроса, что событие click и keydown - не вариант.

[Воващ]

Анатолий, ... addEventListener('input', ...

он не равен ни click, ни keydown, даже не keyup

в данном случае отлавливает ввод в тот инпут и даже при копипасте...

[Анатолий]

Воващ, не заметил.
Исправил пример, в консоли так ничего и не выводится, значит не работает.

Answer 2

[Tim]

Событие change для текстовых элементов произойдёт не при каждом вводе, а при потере фокуса поэтому воспользуйтесь событием input. Событие input срабатывает тут же при изменении значения текстового элемента

Comments

[Анатолий]

Вы исказили мой пример, добавьте в input атрибут readonly, и чтобы изменить input добавьте например:

text.addEventListener('click',() => {text.value = '777';})

А вот сейчас проверьте.

[Tim]

Анатолий, что конкретно не понимаете?

[Анатолий]

Tim, я совсем не понимаю, что Вы хотите показать этим примером.