JQuery UI modal dialogue, focus on the first form element

Question

I am currently using jQuery UI modal box.

I am wondering how I can set focus on the first form element of a modal window when opening a dialog, I think this should happen by default, but for some reason it is not.

How to configure jquery ui on the first form element when opening?

here is the URL of the page with the modal dialog, just click the "Show dialog" link on this page

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

By default, jQuery UI Modal will focus on the first input field in modal mode.

If for some reason the first input field is not set, you can add the input autofocus attribute in the first input field:

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

Or if you need a second or other input field instead of focus, apply the autofocus input attribute to the second input field:

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

:)

Answer 5

try this, focus on jQuery Modal:

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

Answer 6

I recommend using the "open" function in building a dialog.

See: It is impossible to set focus in the form field in the jQuery UI dialog when clicking on the jQueryUI menu item

Answer 7

Add function in the dialog box that opens

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