Question

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

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

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

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

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

Answer 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也是一种方便易读的方式。

Answer 3

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

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

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

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

Answer 4

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

这是我开始工作的唯一方法。 tabIndex：-1 是解决方案。

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

Answer 5

明确的重点是让jQuery Dialog在打开时滚动到有趣的区域。它现在几乎无处不在。

模糊有效，但如果你有很多内容则不行。如果按钮位于内容的底部，则模糊将删除选择，但将对话框滚动到底部。使用scrollTop将内容滚动到顶部，但保留选中的按钮。如果用户意外点击返回键，则会触发按钮或链接。我选择了一个组合：

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

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

    }
});

像冠军一样......

Answer 6

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

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

Answer 7

嗯，这里的所有解决方案似乎都带有代码或黑客攻击。所以我会发布我的，这只是基于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;
}

您还可以添加/覆盖任何困扰您的其他风格：）

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

或者，在调用其他按钮之前简单地创建一个虚拟输入也可以。这是有效的，因为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>

Answer 11

我偶然发现了一些其他人可能觉得有用的黑客。像这样的解决方案似乎对我有用：

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

它只是以编程方式再次设置它，这似乎可以解决焦点问题。

Answer 12

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

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

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

Answer 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对话框按钮焦点

13 个答案: