javascript - 当以编程方式更改输入时，更改的解决方案不起作用

Question

我已经读过Why onchange doesn't work?现在我知道了，

The onchange event only fires if the user changes the value of the input. It isn't supposed to fire if the input is changed programmatically.

但是我有一个输入字段，当用户通过网站内的 Google map 小部件更改位置时，该输入字段会自动填充。当发生这种情况时，我想获取自动填充的值并填充另一个输入字段。 当输入以编程方式更改时，如何检测或触发函数？

Answer 1

您可以通过覆盖输入的 value 属性的 setter 函数来实现此目的。因此，每次有人以编程方式设置值时，您的重写 setter 都会被触发:

const input = document.getElementById('input');

const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');

Object.defineProperty(input, 'value', {
    set: function(t) {
        console.log('Input value was changed programmatically');
        return descriptor.set.apply(this, arguments);
    },
    get: function() {
      return descriptor.get.apply(this);
    }
});

function changeInput() {
  input.value += '1';
}

<input id="input">
<button onclick="changeInput()">Change</button>