javascript – Detecting input change in jQuery?

The Question :

365 people think this question is useful

When using jquery .change on an input the event will only be fired when the input loses focus

In my case, I need to make a call to the service (check if value is valid) as soon as the input value is changed. How could I accomplish this?

The Question Comments :
  • what kind of input? textbox? checkbox? radio? textarea? let’s see what you’ve come up with so far
  • Sorry, its a input of type text. And as I said, I have tried change but this does not fire the way I need(for every change on the text in the input). I have also tried keydown but to get this working I will have to keep track off if the input is “dirty” or not.
  • if they are pressing a key, it’s going to change 99% of the time, you could always do a check for the keys that wouldn’t in the event handler.

The Answer 1

551 people think this answer is useful

UPDATED for clarification and example

examples: http://jsfiddle.net/pxfunc/5kpeJ/

Method 1. input event

In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.

In jQuery do that like this

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

starting with jQuery 1.7, replace bind with on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Method 2. keyup event

For older browsers use the keyup event (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when “w” is released the input value is changed and the keyup event fires, but also when the “shift” key is released the keyup event fires but no change has been made to the input.). Also this method doesn’t fire if the user right-clicks and pastes from the context menu:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Method 3. Timer (setInterval or setTimeout)

To get around the limitations of keyup you can set a timer to periodically check the value of the input to determine a change in value. You can use setInterval or setTimeout to do this timer check. See the marked answer on this SO question: jQuery textbox change event or see the fiddle for a working example using focus and blur events to start and stop the timer for a specific input field

The Answer 2

190 people think this answer is useful

If you’ve got HTML5:

  • oninput (fires only when a change actually happens, but does so immediately)

Otherwise you need to check for all these events which might indicate a change to the input element’s value:

  • onchange
  • onkeyup (not keydown or keypress as the input’s value won’t have the new keystroke in it yet)
  • onpaste (when supported)

and maybe:

  • onmouseup (I’m not sure about this one)

The Answer 3

85 people think this answer is useful

With HTML5 and without using jQuery, you can using the input event:

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

This will fire each time the input’s text changes.

Supported in IE9+ and other browsers.

Try it live in a jsFiddle here.

The Answer 4

15 people think this answer is useful

As others already suggested, the solution in your case is to sniff multiple events.
Plugins doing this job often listen for the following events:

$input.on('change keydown keypress keyup mousedown click mouseup', handler);

If you think it may fit, you can add focus, blur and other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user’s behaviour.

Attention: note that changing the value of an input element with JavaScript (e.g. through the jQuery .val() method) won’t fire any of the events above.
(Reference: https://api.jquery.com/change/).

The Answer 5

2 people think this answer is useful

If you want the event to be fired whenever something is changed within the element then you could use the keyup event.

The Answer 6

2 people think this answer is useful

// .blur is triggered when element loses focus

$('#target').blur(function() {
  alert($(this).val());
});

// To trigger manually use:

$('#target').blur();

The Answer 7

1 people think this answer is useful

There are jQuery events like keyup and keypress which you can use with input HTML Elements. You could additionally use the blur() event.

The Answer 8

0 people think this answer is useful

This covers every change to an input using jQuery 1.7 and above:

$(".inputElement").on("input", null, null, callbackFunction);

Add a Comment