Disable tab key on a specific div

Question

I have the following structure:

   
Some content
   
Some content
         


        
      

Answer 1

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

    Can tab to this input
    


    Can't tab to this input
    


    Can tab to this input
    

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();
                            }
                            else if (e.which == 1) {
                                // focus from click
                                return false;
                            }
                            else {
                                alert('God only knows, what buttons are you mashing..?');
                            }
                        });

Revised JS Fiddle demo.