javascript - 您如何侦听/检测输入值的更改 - 当输入值通过 javascript 更改时？

Question

我有一个input与google autoComplete连接。

当用户上下移动时，seachResults输入的值通过 JavaScript 动态更改。

我想在任何给定时间捕获输入中的值。

我已经尝试过了onChange，但是由于onInput没有事件被触发，并且没有设置 - 没有更新。valueDOM Node

您如何检测input通过 动态更新JavaScript的更改？

标签： javascripthtmldomautocomplete

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实际调用setterHTMLInputElement.prototype函数：

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

您可以通过直接在元素本身上放置一个 getter/setter 来隐藏这一点，settervalue调用您自己的函数，允许您监听更改：

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>