Want to see for yourself?
1) First, go to the jQuery UI Dialog demo page, using Firefox + Firebug: http://jqueryui.com/demos/dialog/#modal-form
2) Click the button "Create new user"
3) Use Firebug to inspect the 3 inputs with id's: "name", "email" and "password". There is no tabindex attribute. Now, use Firebug and add the tabindex attribute with any value to these inputs. Any number like 1, 2, 3 should be ok.
4) Voilá! Once you are done you cannot navigate through the controls using TAB key anymore.
Workaround? Never put tabindex attributes in your HTML elements inside a jQuery UI modal dialog!
2 comments:
I was having trouble with this too, and getting strange results, but I wanted to have tab indexes.
I am using a form with multiple tabs (pages) inside a dialog, and found that on some of the pages the tab indexes seemed to be okay, but they were not working as expected on the first page. I realised that jQuery dialog must be using some specific low tab indexes (0, 1?), so I started my own tabIndex values at 100 and everything started working as expected.
Sort of... I found that I then cannot use the tab key to go to my Save and Cancel buttons, but I think I can work around that because I want it to go to the next page anyway, until the last one, and THEN to the buttons - but that's a whole other story.
This was very helpful, tnx. :)
Post a Comment