Question

我有一个弹出式div，它有很多控件。如果我连续按下标签，焦点一定不能从div到父格式。如何做到这一点？感谢

Answer 1

无法以纯HTML格式强制执行然而，有一些脚本可以为您解决这个问题。我强烈建议使用其中一个，因为有一些问题需要解决（A dropdown might appear in front of your modal div）。

如果您使用的是asp.net，可以查看具有模态弹出对话框的ajax控件工具包。

几乎每个体面的javascript框架都有插件来完成此任务。我碰巧使用jQuery工作了很多，jQuery有许多插件来处理这个问题：

jQuery Block UI（http://malsup.com/jquery/block/#dialog）
jQuery Popup对话框（http://vision-media.ca/resources/jquery/jquery-popup-plugin-review）
jQuery模式对话框（http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/）
...... http://plugins.jquery.com/search/node/popup

如果你发现需要自己制作一个，那么这里有一个关于如何使用jQuery做的教程：http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

祝你找到最适合自己的解决方案，祝你好运！

Answer 2

在最后一个控件的 onblur 事件中，将焦点移动到div内的第一个控件。

Answer 3

如果您想绝对确保焦点不会离开，请尝试使用modal div。

Answer 4

我已经实现了基于收集知识的迷你框架，包括这篇文章中的答案。

它使用JQuery UI。

欢迎改进。

这是框架对象：

var TabLim = {};

TabLim.activate = function(el) {
    TabLim.deactivate();

    TabLim._el = el;

    $(window).on('keydown', TabLim._handleTab);

    return TabLim;
};

TabLim.deactivate = function() {
    TabLim._el = null;

    // detach old focus events
    TabLim._detachFocusHandlers();

    TabLim._els = null;
    TabLim._currEl = null;

    $(window).off('keydown', TabLim._handleTab);

    return TabLim;
};

TabLim.setFocus = function(prev) {
    // detach old focus events
    TabLim._detachFocusHandlers();

    // scan for new tabbable elements
    var tabbables = TabLim._el.find(':tabbable');
    TabLim._els = [];

    // wrap elements in jquery
    for ( var i = 0; i < tabbables.length; i++) {
        var el = $(tabbables[i]);
        // set focus listener on each element
        el.on('focusin', TabLim._focusHandler);
        TabLim._els.push(el);
    }

    // determine the index of focused element so we will know who is
    // next/previous to be focused
    var currIdx = 0;
    for ( var i = 0; i < TabLim._els.length; i++) {
        var el = TabLim._els[i];

        // if focus is set already on some element
        if (TabLim._currEl) {
            if (TabLim._currEl === el[0]) {
                currIdx = i;

                prev ? currIdx-- : currIdx++;
                break;
            }

        } else {
            // focus is not set yet.
            // let's set it by attribute "autofocus".
            if (el.attr('autofocus') !== undefined) {
                currIdx = i;
                break;
            }
        }
    }

    if (currIdx < 0) {
        currIdx += TabLim._els.length;
    }
    if (TabLim._els.length) {
        TabLim._els[Math.abs(currIdx % TabLim._els.length)].focus();
    }

    return TabLim;
};

TabLim._handleTab = function(e) {
    if (e.which === 9) {
        e.preventDefault();

        TabLim.setFocus(e.shiftKey);
    }
};

TabLim._focusHandler = function(e) {
    TabLim._currEl = e.currentTarget;
};

TabLim._detachFocusHandlers = function() {
    if (TabLim._els) {
        for ( var i = 0; i < TabLim._els.length; i++) {
            TabLim._els[i].off('focusin', TabLim._focusHandler);
        }
    }
};

如何使用它：

1）激活以限制对特定div的关注

TabLim.activate($('.yourDic')).setFocus();

2）停用

TabLim.deactivate();

限制对特定div的关注

4 个答案: