сосредоточиться на поле div

Question

Я пытаюсь сфокусироваться на div (модальности fancybox), когда пользователь нажимает на выпадающий список.Я попытался установить tabindex на div.Он хорошо фокусируется, однако отображает полосу прокрутки внизу модального окна.

Прочитав, что ссылки, элементы ввода, текстовые области и т. Д. Могут быть настроены на фокус, я попытался сфокусировать скрытый ввод в модальном div безрезультатно.

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

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

Код:

$("select[name=current_home]").click(function() {
    $.fancybox({
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'overlayShow'   : false,
        'titleShow'     : false,
        'width'         : 300,
        'content'       : '<div id="countries">' + $('#countries-box').html() + '</div>',
        'onComplete'    : function() { $('#countries').focus(); },

    });
   //       $('#countries input[name=focusme]').focus();
});

countries-box содержит скрытые страны и города.Я не использовал onComplete, предоставленный fancybox, как вы можете видеть выше закомментированную строку.Я пробовал оба, и без разницы.

любое решение?

Answer 1

Хорошо, вы пытаетесь сфокусироваться <div id="countries>, и дивы не могут быть сфокусированы, равно как и они не переносят фокус внутрь фокусируемых элементов.

Вам нужно сфокусировать input, select, textarea или button внутри вашего div на его onComplete срабатывании события, и хорошим способом было бы сфокусировать первое, как это:

$.fancybox({
    ...
    'onComplete' : function(){ $('#countries :input:visible:enabled:first').focus()}
    ...
});

:input проверяет элементы input, select, textarea и button, как описано в jQuery API