The jQuery.change () event does not fire in the select list from the keyboard: how can I override this?

Question

The jQuery .change() event does not .change() second time the user types and press Enter to select an item. It works for the first time.

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

If you focus on the list and type AD and press Enter, [EDIT], a warning appears. But if you type AG and press Enter, nothing will happen. A warning appears only when you click on a button from the list.

What should I do if I want the user to change the list using both the mouse and the keyboard?

I know that I can use .keypress() to handle keyboard events, but it is strange to have two separate sections of code that do the same.

Is there one jQuery event that will process mouse and keyboard changes as soon as they appear?

Thanks!

** UPDATE **

This may 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 pressing a key can be very confusing - this happens only when the user presses Enter or presses, so if I make changes on the client side, the user can be very surprised!

The only solution I can think of is some kind of variable like user_has_just_done_keypress , which is set to true when the key is pressed, and then reset to false in the next change event, but it seems very dirty, It would also not work if you had a change from mouse to change from user reconfiguration. Argh!

Answer 1

Add a handler for the keyup event, not the keystroke! If you use the same handler for pressing a key as for a change, Firefox does not work in Firefox.

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

and handler

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

Answer 2

You can add keypress and both functions to call another function that performs your actual operation. So duplication is not so bad. In fact, the enter key fires an event in firefox

Answer 3

The change function lights up to enter the keyboard:

• Google Chrome 21.0.1180.89 m
• Internet Explorer 9.9.8112.16421

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

Addendum:

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

for $ (document) .ready-function is resolved if for me without breaking it for other browsers.

The change event will still be triggered only once (despite the forced change event from the keystroke handler).

Answer 4

The way .change() works for text input. You need to focus for the change to take effect. This is also described at http://api.jquery.com/change/

Documentation change () Api reads

... the event is triggered immediately when the user makes a selection with the mouse, but for other types of elements, the event is delayed until the element loses focus.

UPDATE You can combine both keystrokes and changes in one live function, as shown below

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

Answer 5

I saw this before while working with IE (all versions, I think). Changing events from the keyboard will only work when the input loses focus; binding to multiple events was the only way to get the handler to work as you expect. You can kill some of the redundancy by specifying the handler as a global function, and then setting it as a handler for several events:

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

Not as clean as we would like, but it's not so bad, and it works.

Hope this helps!