jQuery .change() event doesn't fire on select list from keyboard: how can I override this?

Question

The jQuery .change() event doesn't fire the second time the user types and presses Enter to select an item. It does fire the first time.

See: http://jsfiddle.net/CtXbU/

If you focus on the list and type AD and press Enter, [EDIT] the alert fires. But if you then type AG and press Enter, nothing happens. The alert only pops up when you click away from the list.

What do I do if I want to handle the user changing the list both with the mouse and the keyboard?

I know I can use .keypress() to handle keyboard events, but it feels odd to have two separate sections of code both doing the same thing.

Is there a single jQuery event that would handle both mouse and keyboard changes as soon as they occur?

Thanks!

** UPDATE **

This might clarify my question: http://jsfiddle.net/Bybr2/2/

// How can I create an event (or handler) that 
// (a) fires AS SOON AS keypress is invoked from user keyboard input
// (b) also fires AS SOON AS change is invoked from user mouse input
// (c) does not fire a second time when change is invoked after keypress, when the user clicks away following keypress?

change after keypress can be very confusing - it only occurs when the user presses Enter or clicks away, so if I'm making client-side changes then, the user may well be very surprised!

The only solution I can think of is some kind of variable like user_has_just_done_keypress which is set as true on keypress and then reset to false on the next change event, but it feels very messy. It also wouldn't work if you had a change from the mouse before the change from the user refocussing. Argh!

Answer 1

Add handler for keyup event, not keypress! If you use the same handler for keypress as for change, it does not work well in Firefox for example.

$("select").bind('change keyup', select_handler);

and handler

function select_handler() {
    $(this).val();
};

Answer 2

The change function would fire for keyboard entry for:

• Google Chrome 21.0.1180.89 m
• Internet Explorer 9.9.8112.16421

However not for Firefox 10.0.7 (All on Windows 7 Professional, SP1)

Adding:

$('select').keypress(function() {
  $(this).change();
});

to the $(document).ready-function solved if for me, without breaking it for the other browsers.

The change event would still be triggered only once (in spite of the forced change event from within the keypress handler).

Answer 3

You can add keypress and have both function call another function doing your actual operation. This way the duplication is not as bad. Actually the enter key fires the event in firefox

Answer 4

That's how .change() works for text inputs. You must focus out for the change to take effect. That is also documented at http://api.jquery.com/change/

The change() Api documentation reads

...the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

UPDATE You can combine both keypress and change in one live function as below

$('div').live({
  'change': function() {},
  'keypress': function() {}
})

Answer 5

I've seen this before when working with IE (all versions, I think). Change events from the keyboard will only fire when the input loses focus; binding to multiple events was the only way to get the handler working like you expect it to. You can kill some of the redundancy by defining the handler as a global function, and then setting it as the handler for multiple events:

function change_handler()
{
    // ...stuff...
}

$(document).ready(function() {
    $('input.whatever').bind('change keypress other_event ...', change_handler);
});

Not as clean as I'd like it to be, but it's not that bad, and it works.

Hope this helps!