How can I respond to an input element's value property being set?

Question

I'm writing a user script which needs to respond to an <input> element's value changing, no matter how the change was made.

For user interactions, this is easy — just add a listener for the input event. However, I haven't yet found a way to respond to the input's value being set directly by changing its .value property.

I've tried adding listeners for the change and input events (neither are triggered) and adding a MutationObserver for both the input's attributes and the input's parent's child list (again, neither are triggered). There also doesn't appear to be a property descriptor I can modify.

How can I trigger code to run when an <input> element's .value property is set?

<!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>

Console output:

Property descriptors: {}

JavaScript does not trigger event listeners. Plenty of questions with solutions. Basically if you can not alter the code that sets it, you basically need to use a settimeout and listen for the change because MutationObserver looks for DOM changes and value change does not trigger it. Value is a property, not an attribute. — epascarello, Jul 01 '22 at 17:55

score 0 · Answer 1 · answered Jul 01 '22 at 16:59

0

Fire the change event after updating the value programmatically:

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

answered Jul 01 '22 at 16:59

Ali Sheikhpour

10,475
5
41
82

I don't have control over how the page sets the value. Unless I can respond to it being set via `.value`, I can't run code when it's set. – Ben Blank Jul 01 '22 at 17:52

score 0 · Answer 2 · answered Jul 01 '22 at 20:09

See this answer for great information on why MutationObserver will not catch modifications to properties.

If you are unable to modify the way the value is being changed (node.setAttribute('value', 'newValue') would fire your MutationObserver, for example), then I think your only option is unfortunately a setInterval that poles for value changes at a set frequency.

Something like this:

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>

I didn't really expect the `MutationObserver` to work, but it seemed worth a shot, since some properties *do* trigger it (such as `document.title`) and there's a `value=` attribute. (Though the attribute and the property have different meanings, so no surprise that it didn't work.) — Ben Blank, Jul 02 '22 at 23:00

How can I respond to an input element's value property being set?

2 Answers2