Disable tab key on a specific div

Question

I have the following structure:

<div id="wrapper">
   <div id="div1">Some content</div>
   <div id="div2">Some content</div>
</div>

I want to "disable" the tab key on div2, I mean the elements of div2 won't receive focus when the tab key is pressed.

Is there any easy way to create this tab key blocker using javascript/jquery?

This is just my best guess, but input fields has a tabindex attribute. I'd set it to -1. See what happens. This only applies to input fields though. — John Strickler, Apr 05 '11 at 18:13
Thanks John, it's working with div's, iframes (facebook like), ... — nepomucenobr, Apr 05 '11 at 18:33

score 27 · Accepted Answer · answered Apr 05 '11 at 18:20

27

@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

answered Apr 05 '11 at 18:20

Jason

920
8
19

Yeah, that should do it. Exactly what I came here to post. :) – Robin Maben Apr 05 '11 at 18:23
I...never considered that... =/ +1 for keeping it simple... :) – David Thomas Apr 05 '11 at 18:33
It does not work, which I tested right on this answer. If you focus the comment text field and press `TAB`, focus switches to `Add comment` button. Now, if you execute "Inspect" on the button and add a `tabindex="-1"` to the `
` that surrounds the button, and then repeat the experiment, the button still gets focused.
– Hi-Angel May 15 '23 at 11:53
This won't work if you have an input inside the div: https://codepen.io/thdoan/full/mdzGdQj – thdoan May 15 '23 at 22:56

David Thomas · Answer 2 · 2011-04-05T18:32:26.300

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.

Thank you for your help, David. However, I think Jason's answer is easier :) — nepomucenobr, Apr 05 '11 at 18:35

Disable tab key on a specific div

2 Answers2

Linked