How do you listen / detect changes to an input value – when the input value is changed via javascript?

by

The .value attribute will only change if the script-writer has called setAttribute('value' to set the new value, which is quite an odd thing to do. In almost all situations, I would expect the value to be set by assigning to the value property directly, eg:

input.value="foo";

Calling setAttribute will indeed show a change in the inspected DOM attribute, eg:

<input value="somevalue">


const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);
<input>

But just assigning to the .value property of the element will not result in such a change:

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

Assigning to the .value actually invokes a setter function on HTMLInputElement.prototype:

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

You can shadow this by putting a getter/setter for value directly on the element itself, with the setter invoking your own function, allowing you to listen for changes:

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";
<input>

More Related Contents:

  1. How can I change an element’s class with JavaScript?
  2. Is there a spec that the id of elements should be made global variable?
  3. Converting HTML string into DOM elements?
  4. Check if an element contains a class in JavaScript?
  5. Chrome extension – retrieving global variable from webpage
  6. innerText vs innerHTML vs label vs text vs textContent vs outerText
  7. Get next / previous element using JavaScript?
  8. Why is the value of my input always empty if I store it in a variable?
  9. What is innerHTML on input elements?
  10. How to convert a DOM node list to an array in Javascript?
  11. Adding an onclick event to a table row
  12. Is there a DOM event that fires when an HTML select element is closed?
  13. Does the onchange event propagate?
  14. Difference between Element.value and Element.getAttribute(“value”)
  15. Change ‘s option and trigger events with JavaScript
  16. Is there any “on DOM change” event? [duplicate]
  17. Any event triggered on autocomplete?
  18. Can I apply CSS to the elements within an iframe?
  19. Changing the order of elements
  20. createElement vs. createElementNS
  21. Why does getElementById not work on elements inside the document element? [duplicate]
  22. Does HTML Hidden control have any events? Like onchange or something?
  23. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  24. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  25. Uncaught TypeError: Cannot read property ‘top’ of undefined
  26. getElementsByClassName() with two classes
  27. What is the difference between `firstChild` and `firstElementChild`?
  28. How can I get access to a Highcharts chart through a DOM-Container?
  29. How can I remove wrapper (parent element) without removing the child?
  30. Why does

Leave a Comment