防止jQuery UI对话框将焦点设置到第一个文本框

Question

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

问题在于，jQuery UI对话框（“ open”）以某种方式触发了第一个文本框具有焦点，然后触发了日期选择器日历以立即打开。

因此，我正在寻找一种方法来防止焦点自动发生。

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

Answer 1

jQuery UI 1.10.0 Changelog将故障单4731列出为已修复。看起来好像没有实现focusSelector，而是使用了对各种元素的级联搜索。从票：扩展自动对焦，从[自动对焦]开始，然后是：可粘贴的内容，然后是按钮窗格，然后是关闭按钮，然后是对话框因此，用autofocus属性标记一个元素，该元素应成为焦点：<input autofocus>在文档中，对焦点逻辑进行了说明（在目录下，标题为“焦点”）：打开对话框后，焦点将自动移至与以下内容匹配的第一项：对话框中具有autofocus属性的第一个元素:tabbable对话框内容中的第一个元素:tabbable对话框按钮窗格中的第一个元素对话框的关闭按钮对话框本身

Answer 2

在其上方添加一个隐藏范围，使用ui-helper-hidden-accessible使其通过绝对定位隐藏。我知道您有该课程，因为您使用的是来自jquery-ui的对话框，它位于jquery-ui中。<span class="ui-helper-hidden-accessible"><input type="text"/></span>

Answer 3

在jQuery UI> = 1.10.2中，可以用_focusTabbable安慰剂函数替换prototype方法：$.ui.dialog.prototype._focusTabbable = $.noop;这将影响dialog页面中的所有，而无需手动进行编辑。原始函数除了将焦点设置为具有autofocus属性/ tabbableelement / 的第一个元素，或者回退到对话框本身之外，什么也不做。因为它的使用只是将重点放在某个元素上，所以用替换它应该没有问题noop。