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

javascript jquery jquery-ui

2022-08-30 02:31:01

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

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

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

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

答案 1

在其上方添加一个隐藏跨度，使用 ui-helper-hidden-accessable 使其通过绝对定位隐藏。我知道你有这个类，因为你使用的是jquery-ui中的对话框，它在jquery-ui中。

<span class="ui-helper-hidden-accessible"><input type="text"/></span>

答案 2

jQuery UI 1.10.0 更改日志将工单 4731 列为已修复。

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

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

因此，使用属性标记一个元素，该元素是应该获得焦点的元素：autofocus

<input autofocus>

在文档中，解释了焦点逻辑（在目录下方，标题为“焦点”下）：

打开对话框后，焦点将自动移动到与以下内容匹配的第一个项目：

对话框中具有属性的第一个元素autofocus

对话框内容中的第一个元素:tabbable

对话框按钮窗格中的第一个元素:tabbable

对话框的关闭按钮

对话框本身