Question

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

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

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

这里是带有模态对话框的页面的URL，只需单击Show the Dialog链接 on this page

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会将焦点放在模态中的第一个输入字段中。

如果由于某种原因第一个输入字段未获得焦点，您可以在第一个输入字段中添加输入属性自动对焦：

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

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

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

：）

Answer 4

感谢您的回复，最后我不得不专注于使用事件回调＆＃39; shown.bs.modal＆＃39;将焦点添加到元素。

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

Answer 5

试试这个，专注于Jquery Modal：

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

Answer 6

我建议使用＆＃34;打开＆＃34;对话框构造中的功能选项。

请参阅：Cannot set focus to a form field in a jQuery UI dialog on clicking a jQueryUI menu item

Answer 7

在打开的对话框中添加功能

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

Answer 8

完全显示该对话框大约需要460毫秒，因此最好使用

setTimeout，500

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

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

8 个答案: