How to stop default action of tab key in HTML page

Question

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

@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, Jul 02 '14 at 05:55

score 12 · Accepted Answer · edited Aug 18 '15 at 08:47

12

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

edited Aug 18 '15 at 08:47

G.L.P

7,119
5
25
41

answered Jul 02 '14 at 06:48

user2800089

2,015
6
26
47

Thanks to this [link](http://stackoverflow.com/questions/17073092/chrome-not-allowing-tab-prevendefault?rq=1) – user2800089 Jul 02 '14 at 06:52
If you use TypeScript `if (e.key === "Tab") {` – onetwo12 Jan 13 '23 at 11:28

jontewks · Answer 2 · 2014-07-02T05:59:24.647

0

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.

edited Jul 02 '14 at 05:59

answered Jul 02 '14 at 05:36

jontewks

458
3
7

I have not used tabIndex in my HTML page , and focus is not moving in sequence except on textfields and its getting difficult to predict how focus is moving to any component. That's why I am looking for some option which disable tab click itself on entire page – user2800089 Jul 02 '14 at 05:50
Are you using jQuery? – jontewks Jul 02 '14 at 05:52
Yes , I am using jquery but using jQuery also I am not setting tabIndex – user2800089 Jul 02 '14 at 05:57
Updated the answer to just disable tab as you were looking for. – jontewks Jul 02 '14 at 06:00
I tried your code as below : $("#home").on('keydown',function(){ //home is the outermost div if (event.keyCode == 9) { //tab pressed event.preventDefault(); // stops its action } }); But still tab focus is coming. Is there anything which I am missing? – user2800089 Jul 02 '14 at 06:13
Did you try leaving it with $(document) so the whole page would be affected? – jontewks Jul 02 '14 at 06:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56624/discussion-between-user2800089-and-jontewks). – user2800089 Jul 02 '14 at 06:26

score 0 · Answer 3 · answered Jul 02 '14 at 06:37

0

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

answered Jul 02 '14 at 06:37

Mohit S

13,723
6
34
69

In my posted fiddle , I tried but its not stopping tab from putting focus on buttons – user2800089 Jul 02 '14 at 06:44
1

@user2800089 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 } })` – Mohit S Jul 02 '14 at 07:05

score 0 · Answer 4 · answered Jul 02 '14 at 07:07

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

How to stop default action of tab key in HTML page

4 Answers4