Lock tab key with javascript?
$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) { //tab pressed
objEvent.preventDefault(); // stops its action
}
})
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.
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