jQuery UI对话框按钮焦点

dav*_*eps 59 dialog jquery-ui

当jQuery UI对话框打开时,它会选择其中一个按钮并突出显示它或将焦点设置到它等等...如何停止此行为,以便在对话框打开时没有突出显示任何按钮?

编辑:我在对话框选项中尝试了以下操作,它没有从按钮中删除焦点:

...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...
Run Code Online (Sandbox Code Playgroud)

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

Ed *_*d I 69

使用模糊方法.你可以尝试这个样本.

<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>
Run Code Online (Sandbox Code Playgroud)


Aur*_*ime 18

感谢您的回答,但在我看来,最好的解决方案(至少对我来说,最小的代码和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")}
        }]
Run Code Online (Sandbox Code Playgroud)

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

为按钮提供id也是一种方便易读的方法.

  • 不是个好主意.这会破坏可访问性 - 它会禁用使用Tab键来导航ui. (5认同)

Lev*_*Lev 8

我有同样的问题...试图将焦点设置为另一个元素似乎并没有为我做的技巧,但从选定的元素(在"打开"回调)模糊焦点做了:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $('#element-that-gets-selected').blur();
        }
    });
Run Code Online (Sandbox Code Playgroud)

我想在没有指定特定名称的情况下防止焦点的方法是首先使用选择器,如下所示:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });
Run Code Online (Sandbox Code Playgroud)


Nik*_*aus 6

buttons: [
    {
        tabIndex: -1,
        text: 'Yes',
        click: function(){
            DeleteStuff();
            $(this).dialog('close');
        }
    },
    {
        text: 'No',
        click: function(){
            // Don't delete
            $(this).dialog('close');
        }
    }
]
Run Code Online (Sandbox Code Playgroud)

这是我使用它的唯一方法.tabIndex:-1是解决方案.

哦,我想专注于第二个按钮,所以我的"删除项目?" 默认情况下,确认不会删除该项目.