您如何监听/检测输入值的更改 - 当输入值通过 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">

input.value = 'foo';

<input value="somevalue">

但是仅仅分配给元素的.value 属性不会导致这样的变化：

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

<input>

分配给.value实际调用setter函数上HTMLInputElement.prototype：

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

您可以阴影通过把一个getter / setter方法这value直接元素本身，与二传手调用自己的功能，让你听更改：

<input>

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