Adding text change listener to a text box

Question

I am trying to add a text change listener to a text box. However, the text is not only changed manually by entering the text. For that I can just use the keyup listener. Actually, the text field is for the date and I have a calendar which can be used to select the date and populate the text field. Now whenever there is a change in the text field I want to trigger an action. So which kind of listener should I use?

Are you using some library to generate the Calendar? If so, that library might provide hooks to listen for changes. I don't believe there is [any JavaScript event that will fire when a property is changed programmatically](http://stackoverflow.com/questions/735462/call-javascript-onchange-event-by-programatically-changing-textbox-value). — OverZealous, Aug 09 '11 at 08:06

raphinesse · Answer 1 · 2012-02-13T20:40:57.410

5

Depending on the Browsers you need to support you might use HTML5's oninput. It fires immediately when the monitored input changes. In jQuery you would just do:

$('#my-input').bind('input', function(e) {
    console.log("#my-input's value changed");
});

Update: Unfortunately this method won't work as the event doesn't fire on scripted changes of the input's value. You will have to hook into your calender "manually" just like OverZealous mentioned.

edited Feb 13 '12 at 20:40

answered Aug 09 '11 at 08:01

raphinesse

19,068
6
39
48

Looks like that doesn't work. From the page you linked: **Actions that do not invoke the oninput event:** *Changing the contents of the element from JavaScript.* – OverZealous Aug 09 '11 at 08:04
@OverZealous: Yeah, you're right. I just gave it a try in jsFiddle and it does not work. – raphinesse Aug 09 '11 at 08:08
Isn't there any other method? I just can't hook in the calendar since it's not just an external library I am using. It is already there. Actually I am using django framework and the calendar is generated automatically for the field of type date. So I don't think I should be hooking into django itself. – rajan sthapit Aug 09 '11 at 08:25
Django is a server-side toolkit. It should be using some sort of JavaScript library. You wouldn't be hooking into Django, but adding hooks into the JS code. Decent libraries usually provide some method. – OverZealous Aug 09 '11 at 08:34
thanks man, I had tried other functions and only this worked for me – B. TIger Jan 14 '13 at 20:20

score 2 · Answer 2 · answered Aug 09 '11 at 08:40

How instant do you need this change to occur? Because (despite feeling dirty even writing this), you might be able to poll the field for changes, like this:

function watchField(fieldId, callback) {
    var previousVal = null;

    return setInterval(function() {

        var field = document.getElementById(fieldId);
        var newValue = field.value;

        if(previousVal !== null && previousVal != newValue) {
            callback(fieldId, newValue, previousVal);
        }
        previousVal = newValue;

    }, 2000); // check every 2 seconds
};

var cancelListeneId = watchField("myField", function(field, newValue, previousValue) {
    // handle change
});

// to cancel listener
// clearInterval(cancelListenerId);

Only use this if there is no better solution!

This is horrible, awful, and just plain wrong. I should downvote myself. But it might work. ;-)

It's not awful and wrong: polling is a legitimate approach, although as you say, if there is an event-based approach that works then that is preferable. — Tim Down, Aug 09 '11 at 09:54

Adding text change listener to a text box

2 Answers2

Linked