Html 限制对特定div的关注

我有一个弹出div，它有很多控件。如果我连续按tab键，焦点不能从div转到父窗体。如何操作？

---

感谢上次控件的onblur事件将焦点移动到div中的第一个控件。

如果您想绝对确保焦点不会离开，请尝试使用。这在纯HTML中是不可能实现的。
然而，有相当多的脚本为您处理这个问题。我强烈建议使用其中一个，因为有相当多的问题需要解决（）

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

几乎每一个像样的javascript框架都有插件来实现这一点。我碰巧经常使用jQuery，它有许多插件来处理这个问题：

• jQuery块UI（）
• jQuery弹出对话框（）
• jQuery模态对话框（）
• 。。。这里还有很多东西可以找到

如果您发现需要自己制作一个，下面是一个关于如何使用jQuery的教程：

---

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

我已经实现了基于收集知识（包括本文中的答案）的迷你框架

它使用jqueryui

欢迎改进

以下是框架对象：

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

2） 停用

TabLim.deactivate();

TabLim.deactivate();