JavascriptToSeeAndTraceTheCurrentlyActiveElement

From Level Access Web Labs
Jump to navigation Jump to search

//Description: Display the active element and associated stack trace in the console //Run first then tab through active elements //The CSS verifies that the focus event occured //Author: clane


var focus_css = '*:focus { outline:2px solid purple !important; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style');

style.type = 'text/css';

if (style.styleSheet){

   style.styleSheet.cssText = focus_css;

} else {

   style.appendChild(document.createTextNode(focus_css));

}

head.appendChild(style);

function showActiveElement() {

 console.log(window.document.activeElement);
 if (typeof console.trace !== 'undefined') { 
   console.trace();
 } 

}

var tags = document.getElementsByTagName('*');

for ( var i = 0; i < tags.length; i++ ) {

   tags[i].addEventListener('focus',showActiveElement,false);

}