Question

当用户点击下拉框时，我正在尝试关注div（fancybox模式）。我试过在div上设置tabindex。它可以正常聚焦，但在模态窗口的底部显示一个滚动条。

阅读完链接，输入元素，textareas等可以设置为关注，我已经尝试将隐藏的输入聚焦在模态div中无济于事。

更多详细信息：它是一个用户注册页面，其中所有国家/地区和城市都隐藏在页面中。当用户点击城市下拉框时，会弹出一个fancybox模式，其中显示隐藏的国家和城市的内容。从那里，用户可以点击国家，州，然后点击城市。最后，所选择的城市在之前的下拉列表和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举行隐藏的国家和城市。我没有使用fancybox提供的onComplete，因为您可以看到上面评论的行。我尝试了两种，没有区别。

任何解决方案？

Answer 1

好的，你正在尝试对焦<div id="countries>，并且div无法聚焦，也无法将焦点转移到可聚焦元素内部。

你需要将input，select，textarea或button集中在你的div onComplete事件发生时，并且一个好方法是专注于第一个，像这样：

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

:input检查input，select，textarea和button元素，如jQuery API

中所述

专注于div领域

1 个答案: