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

Jquery UI modal dialog, set focus on first form element

提问by sat

I am currently using the jquery UI modal box.

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

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?

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

here is the url to the page with the modal dialog just click the Show the Dialog link on this page

这是带有模态对话框的页面的 url 只需单击此页面上的显示对话框链接

回答by Abdul Kader

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.

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

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

回答by silver

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

回答by Paul Barclay

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.

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

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

回答by Jonathan Marzullo

By default the jQuery UI Modal will give focus to the first input field in the modal.

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

If for some reason the first input field is not given focus, you can add the input attribute autofocuson the first input field:

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

<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 autofocusto the second input field:

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

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

:)

:)

回答by Muru Bakthavachalam

try this, focus working for Jquery Modal:

试试这个，专注于 Jquery Modal：

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

回答by Jose

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

回答by Mohsen Newtoa

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

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

setTimeout, 500

设置超时，500

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

回答by MattSlay

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

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