CODEWITHSUNDEEP
jquery
jcvandan
jcvandan

Reputation: 14314

jQuery textbox change event

Does text input element not have a change event? When I attach a change event handler to a text input it is not being fired. Keyup is fired, but keyup is not sufficient for detecting a change as there are obviously other ways of entering text into an input.

Upvotes: 25

Views: 133454

Answers (6)

Yaseer Arafat
Yaseer Arafat

Reputation: 81

$('#input').on("input",function () {alert('changed');});

works for me.

Upvotes: 1

Pow-Ian
Pow-Ian

Reputation: 3635

I have found that this works:

$(document).ready(function(){
    $('textarea').bind('input propertychange', function() {
        //do your update here
    }

})

Upvotes: 23

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28548

You can achieve it:

 $(document).ready(function(){              
     $('#textBox').keyup(function () {alert('changed');});
 });

or with change (handle copy paste with right click):

 $(document).ready(function(){              
     $('#textBox2').change(function () {alert('changed');});
 });

Here is Demo

Upvotes: 3

MikeM
MikeM

Reputation: 27405

The HTML4 spec for the <input> element specifies the following script events are available:

onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

here's an example that bind's to all these events and shows what's going on http://jsfiddle.net/pxfunc/zJ7Lf/

I think you can filter out which events are truly relevent to your situation and detect what the text value was before and after the event to determine a change

Upvotes: 29

jcvandan
jcvandan

Reputation: 14314

There is no real solution to this - even in the links to other questions given above. In the end I have decided to use setTimeout and call a method that checks every second! Not an ideal solution, but a solution that works and code I am calling is simple enough to not have an effect on performance by being called all the time.

function InitPageControls() {
        CheckIfChanged();
    }

    function CheckIfChanged() {
        // do logic

        setTimeout(function () {
            CheckIfChanged();
        }, 1000);
    }

Hope this helps someone in the future as it seems there is no surefire way of acheiving this using event handlers...

Upvotes: 4

ventaur
ventaur

Reputation: 1851

The change event only fires after the input loses focus (and was changed).

Upvotes: 14

Related Questions