jQuery UI 对话框按钮焦点

Posted 2023-05-07

技术标签:

【中文标题】jQuery UI 对话框按钮焦点【英文标题】：jQuery UI dialog button focus 【发布时间】：2010-12-20 02:22:07 【问题描述】：

当一个 jQuery UI 对话框打开时，它会选择其中一个按钮并突出显示它或将焦点设置为它等等...我怎样才能停止这种行为，以便在对话框打开时没有突出显示任何按钮？

编辑：我在对话框选项中尝试了以下操作，但没有从按钮中移除焦点：

...
open:function(event, ui)  $("myunimportantdiv").focus(); ,
...

注意：作为临时解决方法，我修改了 .ui-state-focus 的 CSS，但这并不理想...

【问题讨论】：

见dev.jqueryui.com/ticket/4731。将添加一个选项以使其在 1.9 中可配置。请参阅***.com/questions/1202079/… 了解导致此问题的代码的详细信息。 [查看我的解决方案以防止将焦点跳转到 jQuery UI 对话框][1] [1]：***.com/questions/1202079/… 【参考方案1】：

使用模糊方法。你可以试试这个示例。

<html>
    <head>
        <title>No Focus on jQuery Dialog</title>
        <link type="text/css" rel="stylesheet" href="ui.all.css" />
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.dialog.js"></script>
        <script type="text/javascript">
            $(document).ready(function() 
                // Dialog to confirm or cancel
                // Focuses on confirm by default.
                $('#noFocusDialog').dialog(
                    autoOpen: false,
                    buttons: 
                        Confirm: function() 
                            $(this).dialog('close');
                        ,
                        Cancel: function() 
                            $(this).dialog('close');
                        
                    
                );

                // Trigger to open the dialog
                $('#openNoFocusDialog').click(function() 
                    $('#noFocusDialog').dialog('open');

                    // Remove focus on all buttons within the
                    // div with class ui-dialog
                    $('.ui-dialog :button').blur();
                );
            );
        </script>
    </head>
    <body>
        <a id="openNoFocusDialog" href="#">Open Dialog</a>
        <div id="noFocusDialog">
            <p>Confirm that no elements have focus</p>
        </div>
    </body>
</html>

【讨论】：

【参考方案2】：

感谢您的回答，但在我看来，最好的解决方案（至少对我而言，最少的代码并且没有不必要地使用 DOM 上的方法）是在对象数组中定义对话框按钮：

buttons: [
            id  :   "button1",
            text    :   "Button1 text",
            title   :   "tooltip1text1",
            tabIndex:   -1,
            click   :   clickCallback 
        ,
            id      :   "button2",
            text    :   "Button2 text", 
            title   :   "tooltip1text2",
            tabIndex:   -1,
            click   :   function()$(this).dialog("close")
        ]

防止按钮获得焦点的重要部分是： tabIntex:-1

这也是一种为按钮提供 id 的方便且易读的方式。

【讨论】：

不是一个好主意。这破坏了可访问性——它禁止使用 tab 键来导航 ui。如果您担心可访问性（正如@Vroo 提到的），如果只有按钮并关闭对话框，此答案仍然有效。这样，用户只需使用转义键即可将其关闭。只需确保将 closeOnEscape 属性保留为 true。【参考方案3】：

我也遇到了同样的问题...尝试将焦点设置到另一个元素似乎对我没有用，但是从所选元素中模糊焦点（在“打开”回调中）做到了：

    $('#dialog').dialog
    (
    open: function ()
        
        $('#element-that-gets-selected').blur();
        
    );

我想一种在不指定特定名称的情况下防止焦点的方法是使用带有 first 的选择器，如下所示：

    $('#dialog').dialog
    (
    open: function ()
        
        $(this).find('select, input, textarea').first().blur();
        
    );

【讨论】：

我实际上在open: 选项的函数中使用了@Ed Saito 的代码，并且效果很好。比如：`open: function() $(".ui-dialog :button").blur(); 【参考方案4】：

buttons: [
    
        tabIndex: -1,
        text: 'Yes',
        click: function()
            DeleteStuff();
            $(this).dialog('close');
        
    ,
    
        text: 'No',
        click: function()
            // Don't delete
            $(this).dialog('close');
        
    
]

这是我让它工作的唯一方法。 tabIndex: -1 是解决方案。

哦，我想专注于第二个按钮，所以我的“删除项目？”默认情况下，确认不会删除该项目。

【讨论】：

【参考方案5】：

很明显，当打开 jQuery 对话框时，它会滚动到有趣的区域。现在几乎到处都在引用它。

blur 有效，但如果您有很多内容，则无效。如果按钮位于内容的底部，模糊将删除选择，但让对话框滚动到底部。使用 scrollTop 将内容滚动到顶部，但选择按钮。如果用户不小心按了返回键，按钮或链接就会触发。我选择了一个组合：

$('#dialog').dialog(
    open: function (event, ui)

        $('a_selector').blur();
        $(this).scrollTop(0); 

    
);

像冠军一样工作......

【讨论】：

【参考方案6】：

只需添加此行即可删除自动对焦功能：

$.ui.dialog.prototype._focusTabbable = function();

您可以将它添加到共享的 javascript 文件中，它会阻止所有对话框的自动对焦！不再在所有对话框中复制和粘贴

【讨论】：

有效。而提出的其他 3-4 个解决方案失败了。 .【参考方案7】：

这是我通常做的，一直有效：

open: function() 
    $('.ui-dialog button').removeClass('ui-state-focus');
,

【讨论】：

【参考方案8】：

或者，在调用其他按钮之前简单地创建一个虚拟输入也可以。这是因为 UI 只是简单地寻找第一个“输入”作为默认值，通过欺骗 UI 首先看到错误输入，焦点被重定向。

<div id="dialog-confirm" title="Warning!">
<input type='text' size='0' style='position:relative;top:-500px;' />
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
 amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p>
</div>

【讨论】：

【参考方案9】：

嗯，这里的所有解决方案似乎都与代码或黑客有关。所以我会发布我的，这只是基于 CSS 覆盖。困扰我的是使按钮看起来像“选中”的轮廓，所以我只是用“无”覆盖它：

.ui-dialog .ui-dialog-titlebar button.ui-button:focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover  
    outline:none;

您还可以添加/覆盖任何其他困扰您的样式:)

【讨论】：

这是此页面上唯一对我有用的答案。改变 JS 什么也没做。谢谢！【参考方案10】：

根据 ED 和 Lev 的回答，我得到了这个很好的解决方案：

    jQuery("#testDialog").dialog(
        height: 280,
        width: 400,

        open: function ()              
            jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
        
    );

【讨论】：

【参考方案11】：

我知道答案已经被选中了，但是我很久以前在这里找到了一个简单的HTML解决方案。

将以下代码添加为您指定为对话框的 DIV 中的第一个元素。

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

【讨论】：

这有什么帮助？这提供了哪些可访问性功能？【参考方案12】：

我偶然发现了一个小技巧来解决这个问题，其他人可能会觉得有用。这样的解决方案似乎对我有用：

$( "#button" ).click(function()                                    
    // this is a hack to prevent the focus from remaining after a click
    $(this).toggle(this.checked);                                       
);

它只是以编程方式再次检查它，这似乎解决了焦点问题。

【讨论】：

【参考方案13】：

我可以这样做。 jquery-ui-1.12.0.custom/jquery-ui.css -> onuline:none 添加到 896 行 ouline:none

.ui-widget button 
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        outline:none;

【讨论】：

以上是关于jQuery UI 对话框按钮焦点的主要内容，如果未能解决你的问题，请参考以下文章

从页面后面的代码显示时，JQuery 对话框上的按钮焦点不起作用 - asp.net / c#

jquery-ui 对话框不居中，关闭按钮奇怪的行为

将 Jquery UI 对话框按钮更改为表单提交按钮

jQuery UI 对话框按钮图标

从对话框按钮 jquery ui 调用函数

jQuery UI 对话框按钮文本作为变量