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

【问题标题】：How do you listen / detect changes to an input value - when the input value is changed via javascript?您如何侦听/检测输入值的更改 - 当输入值通过 javascript 更改时？
【发布时间】：2023-03-03 07:00:23
【问题描述】：

我有一个 input 与 google autoComplete 连接。

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

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

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

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

【问题讨论】：

the value of the DOM Node is not getting set 等等，值是通过 Javascript 更改的，还是没有？标题暗示它是，但那里的那一行暗示它不是？
别搞错了——输入的值确实发生了变化——我相信通过谷歌——但除非触发事件，否则 value 属性不会更新。例如，如果 onBlur 或 onClick 被触发 - value 属性会更新，但当结果通过 google autoComplete 更改时 - 它不会。
值 attribute 不应该改变，尽管值 property 应该。您如何确定它没有更新，您是否只是在侦听一个事件而没有看到触发侦听器的事件？说明行为的实时 sn-p（或链接）可能会显着清除问题
土豆？波托托？你说的财产是什么意思？输入的 DOM 节点有一个 value 属性。当我使用浏览器检查器查看 DOM 时，除非触发事件，否则值不会改变。

标签： javascript html dom autocomplete

【解决方案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);

&lt;input&gt;

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

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

&lt;input&gt;

分配给.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';

&lt;input&gt;

【讨论】：

这看起来很有希望。我会试一试:)
不幸的是，它没有：/
你能发布你正在使用的代码，以便有一个minimal reproducible example 来调试吗？正如您从实时 sn-ps 中看到的（只需按“运行代码 sn-p”），Javascript 发起的对输入的.value 的更改看起来会被截获并根据需要进行观察。
shadow getter/setter 非常适合我。这帮助我很好地解决了一个错误。

【解决方案2】：

考虑创建和触发输入事件

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

然后

myelement.dispatchEvent(event);

more info

【讨论】：