Detect textarea value change programmatically

Question

I have a textarea field and its value is being set programmatically. I would like to know when the value is set and perform further actions after the value has been set. I tried .on("change"), .bind("input propertychange") but nothing seemed to work. Any suggestions?

<textarea id="testField"></textarea>

$("#testField").on("change keyup", function() {
    // your code here
    alert("Changed");
});

Cheers.

fire change event pragmatically while changing value using `trigger('change')` — Pranav C Balan, Apr 30 '16 at 09:40
Link with possible solution : http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually — Pankaj Verma, Apr 30 '16 at 09:43
for me this code is working..do you find any error in console? — Dhara Parmar, Apr 30 '16 at 09:45
No error in the console. Remember I am programmatically setting it, the user is not typing anything. — Neophile, Apr 30 '16 at 09:45
have you writtern this jquery code in $( document ).ready ?? — Dhara Parmar, Apr 30 '16 at 09:45

score 0 · Answer 1 · answered Mar 11 '20 at 21:49

It seems that change event is triggered only on direct user interaction with the UI.

Redefining value property that triggers the change event for a specific textarea element worked for me:

// A specific instance of HTMLTextAreaElement
var txt = document.getElementById('txtDescripcion');

// define value property for your input instance
Object.defineProperty(txt, 'value', {
    set: function(newValue) {
        var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
        var oldValue = valueProp.get.call(txt);
        valueProp.set.call(txt, newValue);

        // Trigger the change event if value changed
        if (oldValue != newValue) {
            txt.dispatchEvent(new InputEvent('change'));
        }
    },
    get: function() {
        var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
        return valueProp.get.call(txt);
    }
});

Detect textarea value change programmatically

1 Answers1