Как вы слушаете / обнаруживаете изменения входного значения - когда входное значение изменяется с помощью JavaScript?

Question

У меня есть input с google autoComplete подключенным.

Когда пользователь перемещается вверх и вниз по seachResults, значение ввода динамически изменяется с помощью JavaScript.

Я хотел бы захватить значение, которое находится на входе в любомданное время.

Я пробовал onChange и onInput, но так как событие не запускается, а value из DOM Node не устанавливается - обновлений нет.

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

Answer 1

Атрибут .value изменится только в том случае, если автор сценария вызвал setAttribute('value' для установки нового значения, что довольно странно.Практически во всех ситуациях можно ожидать, что значение будет установлено путем непосредственного присвоения свойству value, например:

input.value = 'foo';

Вызов setAttribute действительно покажет изменение в проверяемом DOM атрибут , например:

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

Но только присвоение .value свойству элемента не приведет к такому изменению:

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

Присвоение .value фактически вызывает функцию установки on HTMLInputElement.prototype:

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

Вы можете shadow сделать это, поместив метод получения / установки для value непосредственно на сам элемент, с установщиком, вызывающим вашу собственную функцию, позволяющуювас слушать за изменениями:

const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', {
  get() {
    return get.call(this);
  },
  set(newVal) {
    console.log('New value assigned to input: ' + newVal);
    return set.call(this, newVal);
  }
});


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>