Event when input value is changed by JavaScript?

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

Here is a solution to hook the value property changed for all inputs:

var valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

HTMLInputElement.prototype.addInputChangedByJsListener = function(cb) {
    if(!this.hasOwnProperty("_inputChangedByJSListeners")) {
        this._inputChangedByJSListeners = [];
    }
    this._inputChangedByJSListeners.push(cb);
}

Object.defineProperty(HTMLInputElement.prototype, "value", {
    get: function() {
        return valueDescriptor.get.apply(this, arguments);
    },
    set: function() {
        var self = this;
        valueDescriptor.set.apply(self, arguments);
        if(this.hasOwnProperty("_inputChangedByJSListeners")){
            this._inputChangedByJSListeners.forEach(function(cb) {
                cb.apply(self);
            })
        }
    }
});

Usage example:

document.getElementById("myInput").addInputChangedByJsListener(function() {
    console.log("Input changed to \"" + this.value + "\"");
});

Based on @t-j-crowder and @maciej-swist answers, let's add this one, with ".apply" function that prevent infinite loop without redefining the object.

 function customInputSetter(){

  var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
  var originalSet = descriptor.set;

  // define our own setter
  descriptor.set = function(val) {
    console.log("Value set", this, val);
    originalSet.apply(this,arguments);
  }

  Object.defineProperty(HTMLInputElement.prototype, "value", descriptor);
}

I'd add a 5th option based on T.J. Crowder suggestions. But instead of adding new property You could change the actual "value" property to trigger additional action when set - either for the specific input element, or for all input objects:

//First store the initial descriptor of the "value" property:

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
var inputSetter = descriptor.set;

//Then modify the "setter" of the value to notify when the value is changed:

descriptor.set = function(val) {

    //changing to native setter to prevent the loop while setting the value
    Object.defineProperty(this, "value", {set:inputSetter});
    this.value = val;

    //Custom code triggered when $input.value is set
    console.log("Value set: "+val);

    //changing back to custom setter
    Object.defineProperty(this, "value", descriptor);   
}

//Last add the new "value" descriptor to the $input element
Object.defineProperty($input, "value", descriptor);

Instead of changing the "value" property for specific input element, it can be changed generically for all input elements:

Object.defineProperty(HTMLInputElement.prototype, "value", descriptor);

This method works only for change of value with javascript e.g. input.value="new value". It doesn't work when keying in the new value in the input box.

Tags:

Javascript

Events

Recent Posts