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

Jquery UI modal dialog, set focus on first form element

本文关键字：第一个 表单 元素 设置 焦点 模式 UI 对话框 Jquery      更新时间：2023-09-26

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

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

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

这是带有模式对话框的页面的url，只需单击"显示对话框"链接在这个页面上

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

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

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

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

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

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

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

如果由于某种原因，第一个输入字段没有聚焦，您可以在第一个输入域上添加输入属性自动聚焦：

<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>

：）

试试这个，专注于Jquery Modal:

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

我建议在对话框构造中使用"open"函数选项。

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

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

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

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

setTimeout，500

setTimeout(function(){$("#target").focus();},500);
相关文章：