Prevent jQuery UI dialog from setting focus to first textbox
jQuery UI 1.10.0 Changelog lists ticket 4731 as being fixed.
Looks like focusSelector was not implemented, but a cascading search for various elements was used instead. From the ticket:
Extend autofocus, starting with [autofocus], then :tabbable content, then buttonpane, then close button, then dialog
So, mark an element with the autofocus
attribute and that is the element that should get the focus:
<input autofocus>
In the documentation, the focus logic is explained (just under the table of contents, under the title 'Focus'):
Upon opening a dialog, focus is automatically moved to the first item that matches the following:
- The first element within the dialog with the
autofocus
attribute- The first
:tabbable
element within the dialog's content- The first
:tabbable
element within the dialog's buttonpane- The dialog's close button
- The dialog itself
In jQuery UI >= 1.10.2, you can replace the _focusTabbable
prototype method by a placebo function:
$.ui.dialog.prototype._focusTabbable = $.noop;
Fiddle
This will affect all dialog
s in the page without requiring to edit each one manually.
The original function does nothing but setting the focus to the first element with autofocus
attribute / tabbable
element / or falling back to the dialog itself. As its use is just setting focus on an element, there should be no problem replacing it by a noop
.
Add a hidden span above it, use ui-helper-hidden-accessible to make it hidden by absolute positioning. I know you have that class because you are using dialog from jquery-ui and it's in jquery-ui.
<span class="ui-helper-hidden-accessible"><input type="text"/></span>
Starting from jQuery UI 1.10.0, you can choose which input element to focus on by using the HTML5 attribute autofocus.
All you have to do is create a dummy element as your first input in the dialog box. It will absorb the focus for you.
<input type="hidden" autofocus="autofocus" />
This has been tested in Chrome, Firefox and Internet Explorer (all latest versions) on February 7, 2013.
http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open