Lock tab key with javascript?

Question

How to lock or disable and again the tab key with javascript?

Karenkarena

In what purpose you need to do this? – Rudolphrudwik

What do you mean by lock/disable a tab key? Do you mean how to prevent TAB key from transfering focus to next focusable element? – Mahican

Answers below are good, but let me warn you, most users won't like you to prevent them for using their tab. In my case, if it isn't for a game, I'd leave the website ASAP. – Chilcote

Google docs is a good non-game example of disabling tab. Tab actually works like a tab, doesn't transfer focus. – Folkway

@DarinDimitrov One good use case is if you're doing something like a Block UI, i.e. to stop the user from doing anything until an operation is finished or to create a modal dialog. – Quintinquintina

Answer 1

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

Vesuvius

that's work so And open again? and can I use any selector in place of $(document) – Karenkarena

@psygnosis, short answer: yes :-) – Vesuvius

Last question iPhone safari browser has next and previous button.. like works tab key.. But this codes doesnt work on iphone next button.. How can I do that? – Karenkarena

How to revert it back? – Pacifa

Revert what back @Pacifa ? – Vesuvius

@Neal How to revert the preventDefault() on tab keypress? I tried returning false but its not working. Somehow we need to unbind preventDefault(). But I don't know how to do that – Pacifa

This works when I press the tab key after certain intervals, however pressing the tab key twice in a short interval doesn't – Sorb

Answer 2

You can do it like this:

$(":input, a").attr("tabindex", "-1");

That will disable getting focus with tab in all links and form elements.

Hope this helps

Institute

@psygnosis $(":input, a").removeAttr("tabindex"); – Consequence

Answer 3

Expanding on Naftali aka Neal's answer, here's how you'd do it with vanilla JS and both start and stop Tab behavior buttons:

let stopTabFunction = function(e) {
  if (e.keyCode == 9) {
    e.preventDefault();
  }
};
document.getElementById('stopTabButton').onclick = function() {
  document.addEventListener('keydown', stopTabFunction);
};
document.getElementById('resumeTabButton').onclick = function() {
  document.removeEventListener('keydown', stopTabFunction);
};

<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<br/><br/>
<input type="button" id="stopTabButton" value="Stop Tab!"/>
<input type="button" id="resumeTabButton" value="Resume Tab!"/>

Note that this also works for Shift + Tab (reverse direction).

JSFiddle

---

However, in my case, I wanted slightly different behavior: I wanted to basically lock down Tab focus to a single div. To do this, I placed a div before and after it, gave them both tabindex="0" (document-defined tab order on the div's themselves), to make the outer edges of the div focusable, like so:

<div id="beforeMyDiv"></div>
<div id="myDiv">
  <!-- Only want Tab indexing to occur in here! -->
</div>
<div id="afterMyDiv"></div>

Then, I changed the function from earlier to this:

//Get the div's into variables etc.
//...

let forceTabFocusFunction = function (e) {
    if (e.keyCode == 9) {
        //Force focus onto the div.
        if (!myDiv.contains(document.activeElement)) {
            if (e.shiftKey) {
                afterMyDiv.focus();
            } else {
                beforeMyDiv.focus();
            }
        }
    }
};

That did the trick nicely.

Quintinquintina

Answer 4

On Neal answer, I'd only add:

if (objEvent.keyCode == 9) {  //tab pressed
    return;
}

Because when you finish typing CPF and press TAB, it counts as a character and changes to CNPJ mask.

Complete code:

<script type="text/javascript">
$(document).ready(function() {
    $("#cpfcnpj").keydown(function(objEvent){
        if (objEvent.keyCode == 9) {  //tab pressed
            return;
        }
        try {
            $("#cpfcnpj").unmask();
        } catch (e) {}

        var size= $("#cpfcnpj").val().length;

        if(size < 11){
            $("#cpfcnpj").mask("999.999.999-99");
        } else {
            $("#cpfcnpj").mask("99.999.999/9999-99");
        }                   
    });
});
</script>

Doddered

Please write your answer in English.Stack Overflow is an English-only site, and all the questions and answers must be in English. – Migration

Translated to english. – Grivation

Still doesn't make sense. Lol – Quintinquintina