阻止jQuery UI对话框将焦点设置为第一个文本框 [英] Prevent jQuery UI dialog from setting focus to first textbox

问题描述

我已经设置了一个jQuery UI模式对话框，以便在用户单击链接时显示。在该对话框div标签中有两个文本框（我只显示简洁的代码），它被更改为jQuery UI DatePicker文本框，对焦点作出反应。

I have setup a jQuery UI modal dialog to display when a user clicks a link. There are two textboxes (I only show the code for 1 for brevity) in that dialog div tag and it is changed to be a jQuery UI DatePicker textbox that reacts on focus.

问题是jQuery UI对话框（'open'）以某种方式触发第一个文本框有焦点，然后触发datepicker日历立即打开。

The problem is that the jQuery UI dialog('open') somehow triggers the first textbox to have focus, which then triggers the datepicker calendar to open immediately.

所以我我正在寻找一种方法来防止焦点自动发生。

So I am looking for a way to prevent the focus from happening automatically.

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

推荐答案

jQuery UI 1.10.0更改日志列出票4731 正在修复。

看起来没有实现focusSelector，但是使用了对各种元素的级联搜索。从票证：

Looks like focusSelector was not implemented, but a cascading search for various elements was used instead. From the ticket:

扩展自动对焦，从[autofocus]开始，然后：tabbable内容，然后是buttonpane，然后是关闭按钮，然后是对话框

Extend autofocus, starting with [autofocus], then :tabbable content, then buttonpane, then close button, then dialog

因此，使用 autofocus 属性标记元素，这是元素应该得到焦点：

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:

1. 第一项具有自动对焦属性的对话框中的元素


2. 第一个：tabbable 元素在对话框的内容中


3. 对话框按钮窗格中的第一个：tabbable 元素


4. 对话框的关闭按钮


5. 对话框本身

1. The first element within the dialog with the autofocus attribute
2. The first :tabbable element within the dialog's content
3. The first :tabbable element within the dialog's buttonpane
4. The dialog's close button
5. The dialog itself

这篇关于阻止jQuery UI对话框将焦点设置为第一个文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！