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

问题描述

我设置了一个 jQuery UI 模态对话框，当用户单击链接时显示.在那个对话框的 div 标签中有两个文本框(为了简洁起见，我只显示了 1 的代码)，它被更改为一个对焦点做出反应的 jQuery UI DatePicker 文本框.

问题是 jQuery UI 对话框('open')以某种方式触发第一个文本框获得焦点，然后触发日期选择器日历立即打开.

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

<div><a id="lnkAddReservation" href="#">添加预约</a></div><div id="divNewReservation" style="display:none" title="添加预订"><表格><tr><th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="开始日期"/></th><td><asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker"/></td></tr><div><asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="添加预订"/>

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

解决方案

jQuery UI 1.10.0 Changelog 将 ticket 4731 列为已修复.

看起来似乎没有实现 focusSelector，而是使用了对各种元素的级联搜索.从票:

<块引用>

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

所以，用 autofocus 属性标记一个元素，这就是应该获得焦点的元素:

<输入自动对焦>

在文档中，解释了焦点逻辑(就在目录下，在标题焦点"):

<块引用>

打开对话框时，焦点会自动移动到第一项匹配以下内容:

1. 对话框中带有 autofocus 属性的第一个元素
2. 对话框内容中的第一个 :tabbable 元素
3. 对话框按钮窗格中的第一个 :tabbable 元素
4. 对话框的关闭按钮
5. 对话框本身

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.

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 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:

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屋！