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

IT技术 javascript jquery jquery-ui
2021-01-12 12:57:47

我已经设置了一个 jQuery UI 模式对话框,当用户单击链接时显示。在那个对话框的 div 标签中有两个文本框(为了简洁,我只显示了 1 的代码),它被更改为一个对焦点做出react的 jQuery UI DatePicker 文本框。

问题是 jQuery UI dialog('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>
6个回答

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

<span class="ui-helper-hidden-accessible"><input type="text"/></span>
这会给使用辅助技术(例如屏幕阅读器)的人带来问题
2021-03-16 12:57:47
很棒的工作。不需要js,不改变布局,jquery ui原生支持。
2021-03-18 12:57:47
同意,很棒的工作。也很高兴了解隐藏的可访问类!谢谢!!
2021-03-25 12:57:47
@rink.attendant.6 哪些问题?
2021-04-03 12:57:47
惊人的解决方案
2021-04-08 12:57:47

jQuery UI 1.10.0 Changelog故障单 4731列为已修复。

看起来 focusSelector 没有实现,而是使用了对各种元素的级联搜索。从门票:

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

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

<input autofocus>

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

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

  1. 对话框中具有autofocus属性的第一个元素
  2. :tabbable对话框内容中的第一个元素
  3. :tabbable对话框按钮窗格中的第一个元素
  4. 对话框的关闭按钮
  5. 对话框本身
fwiw,我在第一个输入上方添加了一个带有 type="hidden" 的输入,并为其添加了 autofocus 属性。这并不意味着你认为它意味着什么,但它可以解决这个问题。
2021-03-13 12:57:47
投反对票是为了什么?如果是因为我列出了 1.9 作为修复版本,我已经更新到 1.10 以匹配票证。
2021-03-16 12:57:47
我正在查看 Dialog 的 jquery-ui 1.10 文档,但没有看到。我在 api 中搜索了“focusSelector”,但它不存在。
2021-04-04 12:57:47
将焦点设置到屏幕外的任何元素都会将窗口向上或向下滚动到该元素,只要窗口获得焦点就会发生这种情况,而不仅仅是在对话框打开时。如果我使用 Firebug 来“检查元素”,然后在文档窗口中单击返回,我的窗口会向上或向下滚动到 jQuery-UI 所关注的任何元素。问题不是如何选择哪个元素获得焦点,而是如何防止焦点。选择不同的元素来关注并不能解决问题。
2021-04-05 12:57:47
jQuery UI 认为这个“固定”的想法是疯狂的。解决方法是完全删除任何自动对焦逻辑。我让你打开一个对话框,而不是专注于输入。很烦人。
2021-04-11 12:57:47

在 jQuery UI >= 1.10.2 中,可以用_focusTabbable安慰剂函数替换原型方法:

$.ui.dialog.prototype._focusTabbable = $.noop;

小提琴

这将影响dialog页面中的所有s,而无需手动编辑每一个。

原始函数除了将焦点设置为具有autofocus属性 /tabbable元素 /的第一个元素或回退到对话框本身之外,什么都不做由于它的用途只是将焦点设置在一个元素上,因此将其替换为 应该没有问题noop

@Robert,不是用 替换它$.noop,而是用一个记下活动对话框的函数替换它,然后注册一个全局键事件处理程序,它拦截ESC并关闭“活动”对话框(如果有)。
2021-03-13 12:57:47
警告:当对话框弹出时,按 Escape 键不会关闭对话框(直到您聚焦对话框)。
2021-03-16 12:57:47
2天寻找这个解决方案......没有其他工作......非常感谢!
2021-04-07 12:57:47
这应该是答案!
2021-04-08 12:57:47
数小时和数小时,数小时和数小时在此燃烧。我的客户谢谢你。
2021-04-12 12:57:47

从 jQuery UI 1.10.0 开始,您可以使用 HTML5 属性 autofocus选择要关注的输入元素

您所要做的就是创建一个虚拟元素作为对话框中的第一个输入。它会为你吸收注意力。

<input type="hidden" autofocus="autofocus" />

这已于 2013 年 2 月 7 日在 Chrome、Firefox 和 Internet Explorer(所有最新版本)中进行了测试。

http://jqueryui.com/upgrade-guide/1.10/# added-ability-to-specify-which-element-to-focus-on-open

我发现以下代码用于打开 jQuery UI 对话框函数。

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

您可以解决 jQuery 行为或更改行为。

tabindex -1 可以作为一种解决方法。

感谢您的研究。现在我知道这是实际的代码在做这件事。我可能会建议 jQuery UI 团队添加一个选项来禁用此自动对焦。
2021-03-17 12:57:47
tabindex=-1 不会阻止我跳到文本框吗?
2021-03-20 12:57:47
@slolife - 很抱歉让这个非常旧的线程复活,但是那个票说修复(focusSelector选项)应该在 jQueryUI 1.8 中,我们现在是 1.8.13,我在jQueryUI 对话框文档中没有看到它. 这是怎么回事?
2021-03-27 12:57:47
我有一个类似的问题,这里描述了我的解决方法 - stackoverflow.com/a/12250193/80002
2021-03-30 12:57:47
没关系。我在修改历史中看到“Milestone changed to 1.8”,并没有注意到它实际上在顶部写了1.9。
2021-04-11 12:57:47