The normal workflow of moving focus from one element to an other, is to first trigger blur() on the first field, then trigger focus() on the second one. This is especially important to determine whether focus remains within a group of fields or gets out of those (a timeout can be set up on blur(), cancelled on focus(), if the timeout triggers then the focus has left the group's fields).
This normal workflow works in all situations: when the user tabs from one field to the next, when the user focuses the second field by clicking, and when focus is programmatically moved via HTMLElement#focus
But now when using jQuery#focus: http://jsfiddle.net/FDjFc/1/
The test case sets up the following:
- Assumes the first field is focused as source
- Logs (prints) when the first field is blurred
- Logs when the second field is focused
Focus can be moved by pressing the [TAB] key (keypress), clicking on the second field (mouse), pressing the [DOWN] key (programmatic, DOM) and pressing the [UP] key (programmatic, jQuery).
Case has been tested in:
- Safari 5.1
- Firefox 13
- Opera 12
- Chrome 19
- Internet Explorer 9
- Internet Explorer 8
In ''all'' of those:
- on keypress, a blur event is triggered on the first field, then a focus even is triggered on the second field
- on mouse, a blur event is triggered on the first field, then a focus even is triggered on the second field
- on programmatic DOM, a blur event is triggered on the first field, then a focus even is triggered on the second field
Divergences happen *only* in programmatic jQuery:
- Internet Explorer 8 and 9 will trigger focus, blur, then focus again
- Other browsers trigger focus on the second field, then blur on the first one.
Which means it is ''not possible'' to use the pattern outlined at the top if fields are going to be programmatically focused ''via jQuery'' (or inversely focusing a field programmatically ''via jQuery'' is going to break the pattern).