In my HTML page multiple components exist and on pressing tab button, focus is set to some components (not in sequence). How do I stop tab from putting focus on any component on entire page ? Using outermost div id of html page can we block tab from putting focus on any component and on location bar as well ?

I have added jsfiddle (demo) as well where even I am not using tabindex but still focus is coming so kindly tell me how to disable tab click.

$(document).on('keydown', function(event) {
   if (event.keyCode == 9) {   //tab pressed
      event.preventDefault(); // stops its action
   }
});

In my HTML page multiple components exist and on pressing tab button, focus is set to some components (not in sequence). How do I stop tab from putting focus on any component on entire page ? Using outermost div id of html page can we block tab from putting focus on any component and on location bar as well ?

I have added jsfiddle (demo) as well where even I am not using tabindex but still focus is coming so kindly tell me how to disable tab click.

$(document).on('keydown', function(event) {
   if (event.keyCode == 9) {   //tab pressed
      event.preventDefault(); // stops its action
   }
});

• javascript
• jquery
• html

• Show code and what you tried. – mplungjan Commented Jul 2, 2014 at 5:38
• @mplungjan I have not tried any code to stop tab from working but I am looking any example or hint with which I can proceed to disable tab on entire page because in my html page focus using tab click is not going in sequence , so it's difficult to predict order of focus. That's why I am looking for some example with which I can disable tab click on entire page – user2800089 Commented Jul 2, 2014 at 5:55
• Kindly answer instead of down-voting my question. – user2800089 Commented Jul 2, 2014 at 6:14

4 Answers 4

I tried below code and its working fine in my scenario :

$(document).keydown(function (e) 
{
    var keycode1 = (e.keyCode ? e.keyCode : e.which);
    if (keycode1 == 0 || keycode1 == 9) {
        e.preventDefault();
        e.stopPropagation();
    }
});

Here is some jQuery you can use to disable the tab key on the whole page.

$(document).on('keydown', function(event) {
    if (event.keyCode == 9) {   //tab pressed
        event.preventDefault(); // stops its action
    }
});

There may be some other ramifications of completely disabling the tab key that you may want to consider.

A little change try keypress instead of keydown and return false instead of event.preventDefault(); Something like this

$(document).on("keypress", function(event) {
    if (event.keyCode == 9) {   //tab pressed
        return false; // stops its action
    }
});

I am new to this place so dont know How to answer in comments. I tried but it looks like a line not code its worked fine with this code Actually .on shud be removed from it

$(document).keydown(function(event) {
    if (event.keyCode == 9) {  //tab pressed
        event.preventDefault(); // stops its action
    }
})

Updated the fiddle as well