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

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

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

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

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

Ответы

Ответ 1

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

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

Отключить datepicker временно, пока не откроется диалоговое окно:

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

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

Ответ 2

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

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

<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

Ответ 3

В соответствии с принятым ответом здесь это открытая проблема с пользовательским интерфейсом jQuery "ядро". Как было предложено, попробуйте установить вкладку index -1 в текстовое поле.

Ответ 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();
    }

Ответ 5

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

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

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

Ответ 6

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

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

});