374

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?

Improve this question
3
  • 3
    what kind of input? textbox? checkbox? radio? textarea? let's see what you've come up with so far Commented Jun 23, 2011 at 18:27
  • 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. Commented Jun 23, 2011 at 18:34
  • 2
    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. Commented Jun 23, 2011 at 18:38

8 Answers 8

Reset to default
568

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

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Could you explain more about this solution? How do I get the current value? An how do I get this to only run when changes is made to the current value?
input event? there is no input event in jQuery (yet)...stackoverflow.com/q/11189136/104380
For method 2 I usually bind to both keyup and change. That way in situations where input occurs without a keypress (like pasting) it will at least fire the event when the input loses focus.
Docs for "input" event: whatwg.org/specs/web-apps/current-work/multipage/…
@AdiDarachi MutationObserver will track changes to DOM elements. However, a user changing data in an input field does not trigger a MutationObserver change...I setup a test case, only a JS code change to the innerText or value attribute (simulating user input) will trigger a MutationObserver event jsfiddle.net/pxfunc/04chgpws/1 (see the console.log for MutationObserver event logging). Do you have a different test case I can look at?
|
192

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)
Improve this answer

1 Comment

@naomik from my test it works for checkbox inputs; except IE/Edge. Some other exceptions may appear, but it's smarter to use onchange for those input types(IMHO).
89

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.

Improve this answer

2 Comments

'change' only fires on blur, not when the text changes. Use 'input' event to detect text changes.
15

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/).

Improve this answer

3 Comments

i also recommend to add focusout to avoid problems with autocomplete
I see. I searched, and focusout seems to be supported only by IE and partially by Chrome, am I right?
Just as a mild addition, To fire the event from jQuery you can call the corresponding action after .val() e.g for a change event on an input field, you would do something like this... $('#element').val(whatever).change()
3

// .blur is triggered when element loses focus

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

// To trigger manually use:

$('#target').blur();
Improve this answer

1 Comment

.change is as I said only thrown when the inout loses focus and the value is changed, I need to get a even as soon as the input(text) is changed (as soon as the text in the input is changed). Blur will only trigger when the input loses focus.
2

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

Improve this answer

5 Comments

Okay but is this not more or less the same as the keydown? I will have to check if the input is "dirty" myself?
@SnowJim if you only want to do stuff when the input actually changes, you've got to either use onchange, or track the state yourself. keydown doesn't work because it fires before the input's state gets changed.
@Alnitak exacly and thats why I asking the question here. The onchange is not working, is it only thrown when leaving the input.
The elephant in the room of course is mobile. Pretty sure no keyboard or mouse events are going be of much use there. :p
@Askdesigners Keyup/down events should still work in the same fashion on mobile.
1

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

Improve this answer

2 Comments

.change is as I said only thrown when the inout loses focus and the value is changed, I need to get a even as soon as the input(text) is changed (as soon as the text in the input is changed). Blur will only trigger when the input loses focus.
you can't reliably check an input's value during a keypress event because the pressed key won't have changed that value yet.
0

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

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.