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

score 18 · Answer 1 · answered Jun 09 '11 at 10:57

18

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(); }
});

answered Jun 09 '11 at 10:57

Abdul Kader

5,781
4
22
40

score 10 · Answer 2 · answered Jun 07 '12 at 10:05

10

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();

answered Jun 07 '12 at 10:05

silver

101
1
2

score 7 · Answer 3 · answered May 09 '14 at 07:15

7

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();
    });

answered May 09 '14 at 07:15

Paul Barclay

489
6
16

That's a bootstrap dialog, not a regular jQuery UI dialog. – JotaBe Jun 26 '14 at 09:00
Thanks for this for bootstrap reference, for some reason, this has to be done on the shown event. It will not set the focus if set implicitly for example on the click event that opens the modal. – moto_geek Nov 03 '19 at 02:57

score 4 · Answer 4 · answered Jan 24 '14 at 17:35

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>

:)

answered Jan 24 '14 at 17:35

Jonathan Marzullo

6,879
2
40
46

I tried this and the focus did indeed land on the element I added autofocus to, however a second later the focus vanished... – Paul Barclay May 05 '14 at 13:44
Is your DOCTYPE set for HTML5 ` `. .. Do you have any other JS code giving focus on your page? Also are you using the latest version of jQuery and jQuery UI Dialog? – Jonathan Marzullo May 05 '14 at 19:38
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(); }); – Paul Barclay May 09 '14 at 07:11
1

This works fine for me. I like examples like this, clean, simple and work first time. Thanks bud :) – djack109 Feb 05 '16 at 15:04
No worries @user985197, glad to help! – Jonathan Marzullo Feb 08 '16 at 20:30

score 2 · Answer 5 · answered Apr 11 '14 at 20:26

2

try this, focus working for Jquery Modal:

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

answered Apr 11 '14 at 20:26

Muru Bakthavachalam

1,340
12
8

Had to use this one for when using more than one modal, one after another. Call the dialog, then the timeout – Dan Oct 27 '15 at 09:29

score 0 · Answer 6 · edited May 23 '17 at 10:29

0

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

edited May 23 '17 at 10:29

Community

1
1

answered Mar 21 '14 at 22:49

MattSlay

9,115
5
43
52

score 0 · Answer 7 · answered Dec 17 '14 at 20:36

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);
                            }
                        });

score 0 · Answer 8 · answered Nov 27 '19 at 18:51

0

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

setTimeout, 500

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

answered Nov 27 '19 at 18:51

Mohsen TOA

759
10
17

Jquery UI modal dialog, set focus on first form element

8 Answers8

Linked