Lock tab key with javascript?

Question

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

Answer 1

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

Answer 2

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

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.

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>