以下のサンプルでは、div 内にナビゲーションを配置しようとしています。JS 関数を使用して現在の要素を取得し、フォーカスを確認して設定しました。ただし、フォーカスは常に次の要素に設定されます。誰かチェックできますか?
<!DOCTYPE html>
<head>
<title>Overlay</title>
<style>
#outer
{
width: 100%; height: 100%;
}
.overlay
{
background-color: grey;
opacity: .7;
filter: alpha(opacity=70);
position: fixed; top: 100px; left: 100px;
width: 500px; height: 300px;
z-index: 10;
border: 1px solid black;
display: none;
}
</style>
<script>
function loadOverlay(event) {
var oly = document.getElementById('overlay');
oly.style.display="block";
document.getElementById('userName').focus();
}
// restore page to normal
function restore() {
// document.body.removeChild(document.getElementById("overlay"));
//document.getElementById('overlay').focus();
}
// restore page to normal
function sayHi() {
alert("Hi");
}
function navigate(event, maxtab) {
//alert(event);
if (window.event)
{
caller = window.event.srcElement; //Get the event caller in IE.
key = window.event.keyCode; //Get the keycode in IE.
}
else
{
caller = event.target; //Get the event caller in Firefox.
key = event.which; //Get the keycode in Firefox.
}
var currtab = document.activeElement.tabIndex;
// alert(key);
if(key==9) {
if(currtab==6) {
document.getElementById("userName").focus();
}
}
}
</script>
</head>
<body>
<div id="outer">
<p>Check overlay</p>
<input type=button onclick="loadOverlay(event)" value="Open overlay">
</div>
<div id="overlay" class="overlay" onkeydown="navigate(event, 5)">
<h1>Enter your Name and Pasword </h1><br>
<table border=1>
<tr><td>Enter Your Name :</td>
<td>
<input tabindex="2" type="text" id="userName" value=""></td>
</tr>
<tr><td>Enter Your PassWord :</td>
<td><input tabindex="3" type="password" id="userPassWord" value=""></td>
</tr>
<tr>
<td>Confirm Your PassWord :</td>
<td><input tabindex="4" type="password" id="userRePassWord" value=""></td>
</tr>
<tr>
<td align=center><input tabindex="5" type="submit" id="formsub" name="Submit" value="Submit" ></td>
<td align=center><input tabindex="6" type="reset" id="formref" name="reset" value="Refresh"></td>
</tr>
</table>
</div>
</body>