代码之家 › 专栏 › 技术社区 › davidsleeps

jQueryUI对话框按钮焦点

dialog jquery-ui

davidsleeps · 技术社区 · 16 年前

当一个jQueryUI对话框打开时,它会选择其中一个按钮并高亮显示或设置焦点等。。。如何停止此行为,以便在对话框打开时不会突出显示任何按钮?

编辑

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

.ui-state-focus 但这并不理想。。。

12 回复 | 直到 7 年前

Ed I 15 年前

使用模糊方法。你可以试试这个样品。

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

Aureltime 13 年前

感谢您的回答,但在我看来,最好的解决方案(至少对我来说,代码最少,并且没有在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")}
        }]

防止按钮聚焦的重要部分是: 塔宾特斯:-1

SikoSoft 14 年前

我也有同样的问题。。。尝试将焦点设置到另一个元素似乎对我来说不起作用,但模糊所选元素(在“打开”回调中)的焦点会:

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

我认为在不指定特定名称的情况下防止焦点的一种方法是将选择器与first一起使用,如下所示:

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

Niklaus 12 年前

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

tabIndex:-1 这就是解决办法。

user82646 user82646 14 年前

很明显,焦点会导致jQuery对话框在打开时滚动到感兴趣的区域。现在几乎到处都在引用它。

模糊可以工作,但如果你有很多内容就不行了。如果按钮位于内容的底部,blur将删除所选内容,但将对话框滚动至底部。使用scrollTop将内容滚动到顶部,但未选中按钮。如果用户不小心按了返回键,按钮或链接将触发。我选择了一个组合:

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

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

    }
});

像冠军一样工作。。。

joalcego 8 年前

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

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

silkfire thezar 12 年前

这是我通常做的,一直有效:

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

Mgfranz 12 年前

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

John Bernardsson 10 年前

嗯,这里的所有解决方案似乎都与代码或黑客有关。所以我将发布我的,这是基于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;
}

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

Justin 10 年前

根据ED和Lev的回答,我得到了一个很好的解决方案:

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

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

Matt Finucane 8 年前

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

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

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

poleguy 10 年前

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

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

它只是通过编程方式将其再次设置为选中,这似乎解决了焦点问题。

atymic Kyle Lester 6 年前

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