Event when input value is changed by JavaScript?

Question

What is the event when an <input> element's value is changed via JavaScript code? For example:

$input.value = 12; 

The input event is not helping here because it's not the user who is changing the value.

When testing on Chrome, the change event isn't fired. Maybe because the element didn't lose focus (it didn't gain focus, so it can't lose it)?

Answer 1

There is no built-in event for that. You have at least four choices:

1. Any time you change $input.value in code, call the code you want triggered by the change
2. Poll for changes
3. Give yourself a method you use to change the value, which will also do notifications
4. (Variant of #3) Give yourself a property you use to change the value, which will also do notifications

Of those, you'll note that #1, #3, and #4 all require that you do something in your code differently from just $input.value = "new value"; Polling, option #2, is the only one that will work with code that just sets value directly.

Details:

1. The simplest solution: Any time you change $input.value in code, call the code you want triggered by the change:

   $input.value = "new value"; handleValueChange(); 

2. Poll for changes:

   var last$inputValue = $input.value; setInterval(function() {     var newValue = $input.value;     if (last$inputValue != newValue) {         last$inputValue = newValue;         handleValueChange();     } }, 50); // 20 times/second 

   Polling has a bad reputation (for good reasons), because it's a constant CPU consumer. Modern browsers dial down timer events (or even bring them to a stop) when the tab doesn't have focus, which mitigates that a bit. 20 times/second isn't an issue on modern systems, even mobiles.

   But still, polling is an ugly last resort.

   Example:

   var $input = document.getElementById("$input");  var last$inputValue = $input.value;  setInterval(function() {      var newValue = $input.value;      if (last$inputValue != newValue) {          last$inputValue = newValue;          handleValueChange();      }  }, 50); // 20 times/second  function handleValueChange() {      console.log("$input's value changed: " + $input.value);  }  // Trigger a change  setTimeout(function() {      $input.value = "new value";  }, 800);

   <input type="text" id="$input">

3. Give yourself a function to set the value and notify you, and use that function instead of value, combined with an input event handler to catch changes by users:

   $input.setValue = function(newValue) {     this.value = newValue;     handleValueChange(); }; $input.addEventListener("input", handleValueChange, false); 

   Usage:

   $input.setValue("new value"); 

   Naturally, you have to remember to use setValue instead of assigning to value.

   Example:

   var $input = document.getElementById("$input");  $input.setValue = function(newValue) {      this.value = newValue;      handleValueChange();  };  $input.addEventListener("input", handleValueChange, false);  function handleValueChange() {      console.log("$input's value changed: " + $input.value);  }  // Trigger a change  setTimeout(function() {      $input.setValue("new value");  }, 800);

   <input type="text" id="$input">

4. A variant on #3: Give yourself a different property you can set (again combined with an event handler for user changes):

   Object.defineProperty($input, "val", {     get: function() {         return this.value;     },     set: function(newValue) {         this.value = newValue;         handleValueChange();     } }); $input.addEventListener("input", handleValueChange, false); 

   Usage:

   $input.val = "new value"; 

   This works in all modern browsers, even old Android, and even IE8 (which supports defineProperty on DOM elements, but not JavaScript objects in general). Of course, you'd need to test it on your target browsers.

   But $input.val = ... looks like an error to anyone used to reading normal DOM code (or jQuery code).

   Before you ask: No, you can't use the above to replace the value property itself.

   Example:

   var $input = document.getElementById("$input");  Object.defineProperty($input, "val", {      get: function() {          return this.value;      },      set: function(newValue) {          this.value = newValue;          handleValueChange();      }  });  $input.addEventListener("input", handleValueChange, false);  function handleValueChange() {      console.log("$input's value changed: " + $input.value);  }  // Trigger a change  setTimeout(function() {      $input.val = "new value";  }, 800);

   <input type="text" id="$input">