Question

我有一个input已连接google autoComplete。

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

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

我尝试了onChange和onInput，但是由于没有触发任何事件，并且value的{{1}}没有设置-没有更新。

如何检测通过DOM Node动态更新的input更改？

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实际上会在HTMLInputElement.prototype上调用 setter函数：

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

您可以通过在元素本身上放置value的getter / setter来遮盖，setter调用您自己的函数，让您可以监听更改：

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>

Answer 2

考虑创建和触发输入事件

var event = new Event('input', {
    bubbles: true,
    cancelable: true,
});

然后

myelement.dispatchEvent(event);

more info

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

2 个答案: