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

Question

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

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

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

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

Answer 1

Как уже упоминалось, это известная ошибка в jQuery UI, которая должна быть исправлена ​​относительно скоро. До тех пор...

Вот еще один вариант, так что вам не нужно связываться с tabindex:

Временно отключите средство выбора даты, пока не откроется диалоговое окно:

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

Работает для меня.

Answer 2

Начиная с 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 3

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

});