focus handling
HTML
<div tabindex="1" id="divtab">abc</div>
<a href="#main" style="width:0px;">anchor</a>
<pre id=active></pre>
<hr />
<ul id="console"></ul>
CSS
input, a {
border: none;
padding: 0;
margin: 0;
display: inline-block;
}
JavaScript
function log(str) {
var item = document.createElement('li');
item.textContent = str;
document.getElementById('console').appendChild(item);
}
var input;
var body = document.body;
var div = document.getElementById('divtab');
div.addEventListener('blur', function() {
log('BLUR div');
}, false);
window.onload = function() {
input = document.createElement('input');
input.addEventListener('blur', function() {
log('BLUR input');
}, false);
body.appendChild(input);
input.focus();
log('===> Detach from the document tree');
body.removeChild(input);
setTimeout(step1, 100);
};
function step1() {
log('activeElement: ' + document.activeElement);
body.appendChild(input);
input.focus();
log('===> Disable it');
input.disabled = true;
setTimeout(step2, 100);
}
function step2() {
log('activeElement: ' + document.activeElement);
input.disabled = false;
log('===> Hide it');
input.focus();
input.style.visibility = 'hidden';
setTimeout(step3, 100);
}
function step3() {
log('activeElement: ' + document.activeElement);
input.style.visibility = 'visible';
log('===> Make it empty box');
input.focus();
input.style.width = '0';
setTimeout(step4, 100);
}
function step4() {
log('activeElement: ' + document.activeElement);
log('===> Focus on empty box');
input.blur();
input.focus();
log('activeElement: ' + document.activeElement);
log('===> Remove tabindex');
div.focus();
log('activeElement: ' + document.activeElement);
div.removeAttribute('tabindex');
setTimeout(step5, 100);
}
function step5() {
log('activeElement: ' + document.activeElement);
}
setInterval(function() {document.getElementById('active').innerHTML = document.activeElement.tagName;}, 500);