florentulve
3/20/2013 - 1:47 PM

Debug tabindex with javascript by listening "tab" key event and show in console the active element. Tested in Chrome 25 and Firefox 19

Debug tabindex with javascript by listening "tab" key event and show in console the active element.

Tested in Chrome 25 and Firefox 19

tabindexDebug.js
content_copyfile_download
(function(){
    "use strict";
    document.addEventListener('keydown', function (event) {    
        setTimeout(function () {
            var key, win, frameEl, activeEl, uri, msg;
            msg = "";
            key = window.event ? event.keyCode : event.which;
    
            //Tab
            if (key === 9) {
    
                activeEl = document.activeElement;
                while (activeEl && activeEl.tagName === 'IFRAME') {
                    activeEl = activeEl.contentWindow.document.activeElement;
                }
                if (activeEl) {
                    msg += activeEl.id + ' - ' + activeEl.tagName;
                    win = activeEl.ownerDocument.defaultView;
                    uri = win.location.href;
                    msg += ' - ' + uri;
                    msg += ' (tabindex=' + activeEl.getAttribute('tabindex') + ')';
                }
    
                frameEl = win.frameElement;
                if (frameEl) {
                    msg += 'in frame ' + frameEl.id + ' (tabindex=' + frameEl.getAttribute('tabindex') + ')';
                }
                console.log(msg);
                activeEl = null;
            }
        }, 500);
    });
})();