Disable Tab Key On A Specific Div

I have the following structure:

Some content

Some content

I want to '

Solution 1:

@John Strickler is right. The behaviour of the tab key can be changed with the tabindex attribute. It is the order the elements will have the focus.

With <div id="div1" tabindex="-1">Some content</div> you should prevent the focus to be on your div.

More info here: http://www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html

Solution 2:

There's a fairly simple way of doing this, using jQuery's focus() method. Given the following, simplified, html:

<divid="first"><labelfor="first">Can tab to this input</label><inputtype="text"id="first" /></div><divid="second"><labelfor="second">Can't tab to this input</label><inputtype="text"id="second" /></div><divid="third"><labelfor="third">Can tab to this input</label><inputtype="text"id="third" /></div>

And the jQuery:

$('#second input').focus(
    function(){
        $('#third input:first').focus();
    });

JS Fiddle demo.

This is, slightly, over-simplified though. If you post your exact mark-up we might be able to offer something a little more...tailored?

It also, in the above implementation, prevents the input being focused via the click event, as well as the tab, which reduces the usefulness, I'd imagine.

---

Edited to revise the above code, to differentiate between focus from mouse-click and keyboard-tab:

$('#second input').bind('keyup mouseup',
                        function(e){
                            if (e.which == 9) {
                                // focus from tab
                                $('#third input:visible:first').focus();
                            }
                            elseif (e.which == 1) {
                                // focus from clickreturnfalse;
                            }
                            else {
                                alert('God only knows, what buttons are you mashing..?');
                            }
                        });

Revised JS Fiddle demo.