Question

我有一个显示表单的jQuery.dialog 第一个输入是<input type="text" class="datepicker" />，我按照这个jQuery('.datepicker').datepicker()初始化日期选择器。

问题是当对话框打开时，它会聚焦第一个输入。所以datepicker也打开了。

对话框的事件open在焦点开始之前运行。

那么，我如何模糊第一个焦点到日期选择器保持隐藏？

Answer 1

从jQuery UI 1.10.0开始，您可以选择使用HTML5属性 自动对焦来关注哪个输入元素。

您所要做的就是在对话框中创建一个虚拟元素作为第一个输入。它会吸引你的注意力。

<input type="hidden" autofocus="autofocus" />

已于2013年2月7日在Chrome，Firefox和Internet Explorer（所有最新版本）中测试过。

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

Answer 2

如前所述，这是jQuery UI的一个已知错误，应该很快就会修复。在那之前...

这是另一个选项，所以你不必乱用tabindex：

暂时禁用日期选择器，直到对话框打开：

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

适合我。

Answer 3

根据接受的答案here，这是open issue jQuery UI“core”。正如那里建议的那样，尝试将tab index -1设置为文本框。

Answer 4

我过去遇到了完全相同的问题，我这样解决了这个问题：

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

Answer 5

$('.datepicker').blur();

这只会像使用一样触发模糊功能，因此日期选择器会隐藏。

问题可能是因为您已将焦点放在脚本某处的文档加载到第一个元素上。所以要么尝试删除该选项，要么在文档加载上添加以上行：）

Answer 6

我必须在打开对话框之前禁用日期选择器，并在打开时启用它。但是，如果您在关闭时不再禁用它，则在初始打开后会再次发生此问题。

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

});

如何在对话框打开时模糊第一个表单输入

6 个答案: