如何响应正在设置的输入元素的 value 属性？

Question

我正在编写一个用户脚本，该脚本需要响应<input>元素的值变化，无论更改是如何进行的。

对于用户交互，这很简单——只需为input事件添加一个监听器。 但是，我还没有找到一种方法来响应通过更改其.value属性直接设置的输入值。

我尝试为change和input事件添加侦听器（均未触发），并为输入的属性和输入的父子列表添加MutationObserver （同样，均未触发）。 似乎也没有我可以修改的属性描述符。

设置<input>元素的.value属性时，如何触发代码运行？

<!DOCTYPE html>
<html>
  <head>
    <title>Detect value change</title>

    <script type="module">
      const range = document.querySelector('input');

      range.addEventListener('change', (event) => console.log('Change:', event));
      range.addEventListener('input', (event) => console.log('Input:', event));

      const observer = new MutationObserver((mutations) => console.log('Mutation:', mutations));

      observer.observe(range, { attributes: true, attributeFilter: ['value'] });
      observer.observe(range.parentNode, { childList: true });

      console.log('Property descriptors:', Object.getOwnPropertyDescriptors(range));

      // Somewhere else, in code I don't control:
      document.querySelector('input').value = 7;
    </script>
  </head>

  <body>
    <input type="range" min="0" max="10" />
  </body>
</html>

控制台 output：

Property descriptors: {}

Answer 1

以编程方式更新值后触发 change 事件：

range.value = 7;
var event = new Event('change');
range.dispatchEvent(event);

Answer 2

有关为什么MutationObserver不会捕获对属性的修改的详细信息，请参阅此答案。

如果您无法修改更改值的方式（ node.setAttribute('value', 'newValue')会触发您的MutationObserver ），那么我认为不幸的是，您唯一的选择是setInterval值更改的极点在设定的频率。

像这样的东西：

 const range = document.querySelector('input'); document.getElementById('incrementValue').addEventListener('click', () => { const val = range.valueAsNumber; range.value = range.value === range.max? range.min: String(val + 1); }); let currentVal; setInterval(() => { // Check for val changes every 1sec if (range.value === currentVal) { return; } currentVal = range.value; console.log(`New value detected. New value is ${range.value}`); }, 1000);

 < DOCTYPE html> <html> <head> <title>Detect value change</title> </head> <body> <button id="incrementValue">Increment value</button> <input type="range" min="0" max="10" value="0" /> </body> </html>

如何响应正在设置的输入元素的 value 属性？

问题描述

2 个解决方案

解决方案1
0 2022-07-01 16:59:02

解决方案2
0 2022-07-01 20:09:58

如何响应正在设置的输入元素的 value 属性？

问题描述

2 个解决方案

解决方案1 0 2022-07-01 16:59:02

解决方案2 0 2022-07-01 20:09:58

解决方案1
0 2022-07-01 16:59:02

解决方案2
0 2022-07-01 20:09:58