Как размыть первый ввод формы при открытии диалога

Question

У меня есть jQuery.dialog, который показывает форму.
Первый ввод <input type="text" class="datepicker" />, и я запускаю средство выбора даты следующим образом: jQuery('.datepicker').datepicker().

Проблема в том, что диалоговое окно открыто,это фокус первого ввода.Таким образом, средство выбора даты также открыто.

Событие диалогового окна open запускается до того, как на него наведен фокус.

Итак, как можно размыть первый фокус, чтобы средство выбора даты оставалось скрытым?

Answer 1

Начиная с jQuery UI 1.10.0, вы можете выбрать , на какой элемент ввода фокусироваться, используя атрибут HTML5 автофокус .

Все, что вам нужно сделатьсоздать фиктивный элемент в качестве первого ввода в диалоговом окне.Он поглотит фокус для вас.

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

Это было протестировано в Chrome, Firefox и Internet Explorer (все последние версии) 7 февраля 2013 года.

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

Согласно принятому ответу здесь это открытый выпуск с пользовательским интерфейсом jQuery "core". Как предлагается там, попробуйте установить индекс табуляции -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

Мне пришлось отключить средство выбора даты перед открытием диалога и включить его при открытии.Но проблема снова возникает после первоначального открытия, если вы снова не отключили ее при закрытии.

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

});

Answer 6

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

это просто вызовет функцию размытия, как при использовании, поэтому указатель даты будет скрыт.

Проблема может быть в том, что вы сконцентрировали внимание на загрузке документа где-то в вашем скрипте первому элементу. либо попробуйте удалить эту опцию, либо добавьте указанную выше строку при загрузке документа:)