Menu
I have tried this code in Firefox 2 and IE 7 and it appears to work. I was hoping some other folks could test it in the various other browsers. I’ve put it online [url=http:/jaith.net/questions/focusTest.html]here[/url] if you are too lazy to cut-and-paste the code yourself.
[code=php]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
function focusHandler(evt) {
var e = evt ? evt : window.event;
var t = e.target ? e.target : e.srcElement;
t.className = ‘focus’;
document.getElementById(‘snitchBox’).innerHTML += “element with focus has id ” + t.id + ‘<br>’;
}
function blurHandler(evt) {
var e = evt ? evt : window.event;
var t = e.target ? e.target : e.srcElement;
t.className = ‘normal’;
document.getElementById(‘snitchBox’).innerHTML += “element BLUR. id=” + t.id + ‘<br>’;
}
function init() {
for(var i=1; i<4; i++) {
var str = ‘div’ + i;
var el = document.getElementById(str);
if (!el) {
alert(str + ‘ not found’);
}
el.tabIndex = i;
el.className = “normal”;
if (el.addEventListener) {
el.addEventListener(‘focus’, focusHandler, false);
el.addEventListener(‘blur’, blurHandler, false);
} else {
el.attachEvent(‘onfocus’, focusHandler);
el.attachEvent(‘onblur’, blurHandler);
}
}
}
</script>
<style>
.normal {
border:0px;
}
.focus {
border:1px dotted red;
}
</style>
</head>
<body onload=”init();”>
<div id=”div1″>Here is div 1</div>
<div id=”div2″>Here is div 2</div>
<div id=”div3″>Here is div 3</div>
<div id=”snitchBox” style=”border:1px solid blue;”>Focus reports appear here.<br />
</div>
</body>
</html>
WHAT TO LOOK FOR
The basic idea is that I want a div tag to be able to respond to focus like anything else.
1) MOST IMPORTANT: When you repeatedly hit the tab key, do the div items eventually gain focus?
2) Do the items gain focus when you click on them directly?
3) Does the border change to the dotted red line when a div gains focus?
4) When focus passes from one div to the next, does the BLUR event appear to happen on the first div before the next one gains focus?
Any help would be much appreciated.