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

Question

我已经读过为什么onchange不起作用？现在我知道了

仅当用户更改输入值时才触发onchange事件。如果以编程方式更改输入，则不应该触发。

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

Answer 1

您可以通过覆盖输入value属性的 setter 函数来实现这一点。因此，每次有人以value编程方式设置时，您的覆盖设置器都会被触发：

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>

Answer 2

我不确定如果代码更改输入的值是否会触发任何事件。不过，您可以做的是运行一个间隔，不断将输入的值与其先前的值进行比较，并在输入值发生变化时执行某些操作。

const inputBox = document.getElementById('my_input');
let previousValue = inputBox.value;
setInterval(() => {
  if (inputBox.value !== previousValue) {
    // fire change handler, then...
    previousValue = inputBox.value;
  }
}, 500);