Disabling tab focus on form elements

Question

hello,

I have several divs within the same form. What I am trying to do is to disable the tab key in one of the div in the form without disabling the tab in the other divs in the same form.

Example:

Form
div1 - disable tab key
div2 - tab key works
div3 - tab key works

Answer 1

Since only INPUT controls are able to gain the keyboard focus, I'm a little confused by the question. You're talking about DIVS to prevent gaining the focus which isn't possible for obvious reasons.

To prevent a specific input to process the tab key you can do:

$(function(){
    $('input:eq(2)').bind('keydown', function(e){
        if(e.which === 9) return false;        
    });
});​

For instance. That would prevent the third input element on your site to process the tab key. Example: http://www.jsfiddle.net/VrxFx/1/

Answer 2

You can remove input elements from the tab sequence by giving them a tabindex value of -1.

For example, a jquery approach to removing input elements from the tab sequence for all input elements inside a div with id "div3" would be

$("#div3 input").attr("tabindex", "-1");

Described in http://dev.w3.org/html5/spec/editing.html#sequential-focus-navigation-and-the-tabindex-attribute , and tested in Firefox 3.6 and IE7.

Note that the input fields can still be focussed on, they are just removed from the tab sequence.