我目前正在使用jquery UI模态框。
我想知道如何在打开对话框时将焦点设置到模态框的第一个表单元素上。我认为这应该是默认情况下发生的，但由于某种原因它没有发生。
如何设置jquery ui在打开时将焦点设置在第一个表单元素上？
以下是带有模态对话框的页面的网址，只需单击“Show the Dialog”链接即可：此页面
8个回答
18
你可以利用jQuery UI对话框中的打开事件，并将焦点设置到输入框ID。你可以像这样做。
$( ".selector" ).dialog({
open: function(event, ui) { $('#target').focus(); }
});
- Abdul Kader
10
添加一个函数到"shown"事件，然后设置焦点。
$('#login_modal').on('shown', function () {
$("#login_modal input").first().focus();
});
$('#login_modal').modal();
- silver
7
感谢回复，最终我不得不使用事件回调函数'shown.bs.modal'来将焦点添加到元素。
$('#login-modal').on('shown.bs.modal', function () {
$("#user_session_email").focus();
});
- Paul Barclay
2
那是一个Bootstrap对话框，不是普通的jQuery UI对话框。 - JotaBe
感谢提供Bootstrap参考，由于某些原因，必须在显示事件上执行此操作。如果例如在打开模态框的单击事件上隐式设置，则无法设置焦点。 - moto_geek
4
默认情况下，jQuery UI 模态框将聚焦于模态框中的第一个输入框。
如果由于某种原因第一个输入框没有聚焦，您可以在第一个输入框上添加 autofocus 属性：
<input type="text" name="date" value="" autofocus>
<input type="text" name="phone" value="">
或者如果你需要第二个或者其他输入框获得焦点，那么就将 autofocus 属性应用于第二个输入框：
<input type="text" name="date" value="">
<input type="text" name="phone" value="" autofocus>
:)
- Jonathan Marzullo
5
我尝试了这个，确实焦点落在了我添加了自动对焦的元素上，但是一秒钟后焦点就消失了... - Paul Barclay
你的HTML5 DOCTYPE设置为
<!doctype html> 了吗？你的页面上有其他JS代码在聚焦吗？另外，你是否正在使用最新版本的jQuery和jQuery UI Dialog？ - Jonathan Marzullo谢谢回复，最终我不得不使用事件回调函数'shown.bs.modal'来将焦点添加到元素。
$('#login-modal').on('shown.bs.modal', function () {
$("#user_session_email").focus();
}); - Paul Barclay
1这对我来说很好用。我喜欢这样的例子，简洁明了，第一次就能运行。谢谢啊 :) - djack109
没问题 @user985197，很高兴能帮忙！ - Jonathan Marzullo
2
尝试这个，专注于Jquery Modal的工作：
setTimeout(function () { $('#cntrlId').focus(); }, 1);
- Muru Bakthavachalam
1
当使用多个模态框时，必须使用此方法。先调用对话框，然后再调用超时函数。 - Dan
0
在打开对话框上添加功能
$("#dialogMensaje").dialog({width: 600,
title: "Notificación",
modal: true,
buttons: {
"Enviar": function() {
$(this).dialog("close");
}
},
open: function() {
setTimeout(function() {
$('#txt').focus();
}, 420);
}
});
- Jose
0
显示对话框需要约460毫秒，因此最好使用
setTimeout，500
setTimeout(function(){$("#target").focus();},500);
- Mohsen TOA
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接