如何在对话框打开时模糊第一个表单输入
我有一个显示表单的jQuery.dialog。
第一个输入是 ，我初始化像这个jQuery('.datepicker').datepicker() 。
问题是当对话框打开时，它会聚焦第一个输入。 所以datepicker也打开了。
对话框的事件open在焦点开始之前运行。
那么，我如何模糊第一个焦点到日期选择器保持隐藏？
如前所述，这是jQuery UI的一个已知错误，应该很快就会修复。 直到那时…
这是另一个选项，所以你不必乱用tabindex：
暂时禁用日期选择器，直到对话框打开：
dialog.find(".datepicker").datepicker("disable"); dialog.dialog({ "open": function() {$(this).find(".datepicker").datepicker("enable");}, });
适合我。
从jQuery UI 1.10.0开始，您可以使用HTML5属性 自动聚焦选择要关注的输入元素 。
您所要做的就是在对话框中创建一个虚拟元素作为您的第一个输入。 它将为您吸收焦点。
这已在2013年2月7日在Chrome，Firefox和Internet Explorer（所有最新版本）中进行了测试。
http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open
根据这里接受的答案，这是jQuery UI“核心”的开放性问题 。 正如那里建议的那样，尝试将tab index -1设置为文本框。
我过去遇到了完全相同的问题，我这样解决了：
function CreateDialog(divWindow) { divWindow.dialog( { title: "Generate Voyages", autoOpen: false, modal: true, width: 'auto', height: 'auto', zIndex: -1000, resizable: false, close: function() { $(this).dialog('destroy'); $('#ui-datepicker-div').hide(); }, "Cancel": function() { $(this).dialog("close"); $('#ui-datepicker-div').hide(); } } }); } function DisplayWindow(divWindow) { divWindow.show() divWindow.dialog("open"); var datePicker = $('#ui-datepicker-div'); var textBoxes = $('input[id^="Generate"]'); datePicker.css('z-index', 10000); textBoxes.blur(); }
$('.datepicker').blur();
这只会像使用一样触发模糊function，因此日期选择器会隐藏。
问题可能是因为您已将焦点放在脚本某处的文档加载到第一个元素上。 所以要么尝试删除该选项，要么在文档加载上添加上面的行:)
我必须在打开对话框之前禁用日期选择器，并在打开时启用它。 但是，如果你没有在关闭时再次禁用它，那么在初始打开后问题会重新出现。
$(document).ready(function () { var dialog; $("#date").datepicker(); $("#date").datepicker("disable"); dialog = $("#dialog-form").dialog({ autoOpen: false, height: "auto", width: "auto", modal: true, buttons: { "Create note": function () { $("#noteForm").submit(); }, Cancel: function () { dialog.dialog("close"); } }, open: function() { $("#date").datepicker("enable"); }, close: function () { $("#noteForm")[0].reset(); $("#date").datepicker("disable"); } }); $("#create-note").button().on("click", function () { dialog.dialog('open'); $("#time").focus(); }); });