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:

<div id="first">
    <label for="first">Can tab to this input</label>
    <input type="text" id="first" />
</div>
<div id="second">
    <label for="second">Can't tab to this input</label>
    <input type="text" id="second" />
</div>
<div id="third">
    <label for="third">Can tab to this input</label>
    <input type="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();
                            }
                            else if (e.which == 1) {
                                // focus from click
                                return false;
                            }
                            else {
                                alert('God only knows, what buttons are you mashing..?');
                            }
                        });

Revised JS Fiddle demo.

Answer 2

@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