Jquery UI模式对话框，将焦点设置在第一个表单元素上

我目前正在使用jquery UI模式框。

我想知道如何在打开对话框时将焦点设置到模态框的第一个表单元素上我认为这是默认情况下发生但由于某种原因它不是。

如何在打开时将jquery ui设置为关注第一个表单元素？

这里是带有modal dialog的页面的URL，只需单击此页面上的显示对话框链接

Answer 1

您可以在jquery ui对话框中使用open事件，并将焦点设置为输入id。 你可以做这样的事情。

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

Answer 2

向显示的事件添加函数绑定，然后设置焦点

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

Answer 3

默认情况下，jQuery UI Modal将焦点放在模态中的第一个输入字段。

如果由于某种原因第一个输入字段没有给定焦点，则可以在第一个输入字段上添加输入属性autofocus ：

或者，如果您需要第二个或另一个输入字段来改为焦点，则将输入属性autofocus应用于第二个输入字段：

🙂

Answer 4

感谢您的回复，最后我不得不使用事件回调’shown.bs.modal’来关注将焦点添加到元素中。

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

Answer 5

试试这个，专注于Jquery Modal：

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

Answer 6

我建议在对话框构造中使用“打开”function选项。

请参阅： 单击jQueryUI菜单项时，无法在jQuery UI对话框中将焦点设置为表单字段

Answer 7

在打开的对话框上添加function

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