There is no built-in event for that. You have at least four choices:
- Any time you change
$input.value
in code, call the code you want triggered by the change - Poll for changes
- Give yourself a method you use to change the value, which will also do notifications
- (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:
-
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();
-
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">
-
Give yourself a function to set the value and notify you, and use that function instead of
value
, combined with aninput
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 tovalue
.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">
-
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">