如何響應正在設置的輸入元素的 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