Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI dialog button focus

When a jQuery UI dialog opens, it selects one of the buttons and highlights it or sets focus to it etc... How can I stop this behaviour so that none of the buttons are highlighted when the dialog opens?

EDIT: I tried the following in the dialog options, which didn't remove focus from the buttons:

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

NOTE: As a temporary workaround I modified the CSS for .ui-state-focus but this isn't ideal...

like image 687
davidsleeps Avatar asked Nov 24 '09 23:11

davidsleeps


3 Answers

Use the blur method. You can try this sample.

<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>
like image 150
Ed I Avatar answered Oct 30 '22 10:10

Ed I


thanks for answers, but it seems to me that the best solution (at least for me, minimal code and no unnecessary use of methods on the DOM) is to define your dialog buttons in an array of object :

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")}
        }]

The important part to prevent your buttons to get focus is : tabIntex:-1

It is also a convenient and readable way to give id to your buttons.

like image 18
Aureltime Avatar answered Oct 30 '22 12:10

Aureltime


I had this same problem... Trying to set the focus to another element didn't seem to do the trick for me, but blurring focus from the selected element (in the "open" callback) did:

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

I suppose a way to prevent focus without specifying a specific name would be to use a selector with first, like this:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });
like image 8
Lev Avatar answered Oct 30 '22 10:10

Lev