CODEWITHSUNDEEP
javascriptjqueryhtml
user2800089
user2800089

Reputation: 2411

How to stop default action of tab key in HTML page

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
   }
});

Upvotes: 6

Views: 25899

Answers (4)

user2800089
user2800089

Reputation: 2411

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();
    }
});

Upvotes: 12

Mohit S
Mohit S

Reputation: 14064

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

Upvotes: 0

Mohit S
Mohit S

Reputation: 14064

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
    }
});

Upvotes: 0

jontewks
jontewks

Reputation: 458

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.

Upvotes: 0

Related Questions