在弹出javascript小部件上下文中控制选项卡焦点

tabindex 您不希望成为选项卡的元素的属性 -1

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" tabindex="-1"/>
    <input type="button" value="also not tabbable" tabindex="-1"/>
</div>

尽管到目前为止我在任何文档中都没有发现这一点,但它似乎在所有经过测试的浏览器(FF3.5,IE6&7,歌剧9.64)。

blur() 当不需要的元素获得焦点时:

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur()"/>
    <input type="button" value="also not tabbable" onfocus="blur()"/>
</div>

这种方法的缺点是,只要您点击一个“untabable”元素,就不会选择任何元素,下一个选项卡将从第一个元素开始。这在向后切换时尤其棘手,这已经不可能了。解决这一问题的办法是积极关注以下要素:

<div>
    <input id="firstTabbable" type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
    <input id="lastTabbable" type="button" value="tabbable three" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/>
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/>
</div>

然而,在我看来,这有点太复杂了。

我在显示弹出窗口时尝试了以下操作,它似乎在Firefox 3中工作。这可能足以让您开始:

$('#nonpopup a').attr('disabled','true');
$('#nonpopup input').attr('disabled','true');

JQuery选择器查找所有 A input id为的div中的元素 nonpopup 并设置html属性 disabled 到 true . 如果您不使用JQuery,您将需要其他方法来查找所有这些元素,但它可能非常简单 document.getElementsByTagName()