Testing refocusing tactics

by Admiral Potato

HTML

<h1>Focus Test</h1>

<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />

<div id="holder">
    <input type="text" id="d" />
    <input type="text" id="e" />
    <input type="text" id="f" class="focus" />
</div>

<input type="text" id="g" />
<input type="text" id="h" />
<input type="text" id="i" />

<div id="output">Active Element:</div>

JavaScript

var keyHandler = function(event){
    if(event.type === 'keydown'){
        if(event.which === 9) { //Tab
            console.log('keyBefore', document.activeElement);
            if($(document.activeElement).parents('#holder').length < 1){
                event.stopPropagation();
                event.preventDefault();
                $('#holder .focus').focus();
            }
            console.log('keyAfter', document.activeElement);
        }
    }
};
var focusHandler = function(event){
            console.log('focusBefore', document.activeElement);
            if($(document.activeElement).parents('#holder').length < 1){
                event.stopPropagation();
                event.preventDefault();
                $('#holder .focus').focus();
            }
            console.log('focusAfter', document.activeElement);
};

$(document).on('keydown', '*', keyHandler);
$(document).on('focus', '*', focusHandler);