Catch tab key

Wrap an element in a div with class of "stopTabs" to stop the tab key being able to focus it.

HTML

<div class="stopTabs">
    <input id="four">
</div>
<input id="five">

CSS

input {
    display: block;
    margin: 16px;
}
.stopTabs {
    background: #fee;
}

JavaScript

var tabbables = document.querySelectorAll("input, textarea, button, a"),
    stopTabSelector = ".stopTabs";

var catchFocus = function(e) {
    var i = 0, tabbableLen = tabbables.length, el,
        matches;
    if(e.keyCode !== 9) {
        return;
    }
    for(; i < tabbableLen; i++) {
        el = tabbables[i];
        if(el !== this) {
            continue;
        }
        if(tabbables[i + 1]) {
            		alert('TAB');
            Array.prototype.forEach.call(document.querySelectorAll(
            stopTabSelector + " *"), function(element) {
                if(element.contains(tabbables[i + 1])) {
                   e.preventDefault();
                }
            });
        }
    }
};

Array.prototype.forEach.call(tabbables, function(element) {
    element.addEventListener("keydown", catchFocus);
});