Jquery UI modal dialog, set focus on first form element

Question

I am currently using the jquery UI modal box.

I am wondering how I can set the focus onto the first form element of the modal box when opening the dialog I think this is meant to happen by default but for some reason it is not.

How can I set the jquery ui to focus on the first form element when opening?

here is the url to the page with the modal dialog just click the Show the Dialog link on this page

Answer 1

You can make use of open event in jquery ui dialog and set the focus to the input id. You can do something like this.

$( ".selector" ).dialog({
   open: function(event, ui) { $('#target').focus(); }
});

Answer 2

Add a function bind to the shown event, then set the focus

$('#login_modal').on('shown', function () {
     $("#login_modal input").first().focus();
 });
 $('#login_modal').modal();

Answer 3

Thanks for the reply, in the end I had to focus using the event callback 'shown.bs.modal' to add the focus to the element.

    $('#login-modal').on('shown.bs.modal', function () {
        $("#user_session_email").focus();
    });

Answer 4

By default the jQuery UI Modal will give focus to the first input field in the modal.

If for some reason the first input field is not given focus, you can add the input attribute autofocus on the first input field:

<input type="text" name="date" value="" autofocus>
<input type="text" name="phone" value="">

Or if you need the second or another input field to have focus instead, then apply the input attribute autofocus to the second input field:

<input type="text" name="date" value="">
<input type="text" name="phone" value="" autofocus>

:)

Answer 5

try this, focus working for Jquery Modal:

setTimeout(function () { $('#cntrlId').focus(); }, 1);

Answer 6

I recommend using the "open" function option in the dialog construction.

See: Cannot set focus to a form field in a jQuery UI dialog on clicking a jQueryUI menu item

Answer 7

Add function on open dialog

$("#dialogMensaje").dialog({width: 600,
                            title: "Notificación",
                            modal: true,
                            buttons: {
                                "Enviar": function() {
                                    $(this).dialog("close");
                                }
                            },
                            open: function() {
                                setTimeout(function() {
                                    $('#txt').focus();
                                }, 420);
                            }
                        });

Answer 8

it takes about 460ms to completely shown the dialog box so it's better to use

setTimeout, 500

setTimeout(function(){$("#target").focus();},500);