Controlling tab focus in javascript widget context

Question

I am working on a lightbox style javascript plugin that produces an image with the next + previous buttons and a close button. I want to make the tab only go between the three buttons presented in the pop-up window, and not go through three of them, and then continue the contents of the page in the background.

Does anyone have any suggestions on the best way to do this, currently I think the best way is to create an array of tabbable elements when a popup appears and just grab the tabs for iteration with this one-by-one array and prevent tab behavior default.

Does anyone know if there are any recommendations on this?

Answer 1

Apparently, a possible solution is to set the property tabindexfor elements that you do not want to use tabbable for -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>

Although I have not found this in any documentation so far, it seems to work in all tested browsers (FF 3.5, IE 6 and 7, Opera 9.64).

Another approach is blur()when an unwanted element gets focus:

<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>

, "", , . , , . :

<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>

, , .

Answer 2

, , Firefox 3. , :

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

JQuery A input, div id nonpopup, html disabled true. JQuery, , , document.getElementsByTagName().

, . Chrome, , URL.