Question

在下面的示例中，我尝试在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>

Javascript tabindex焦点将焦点设置为下一个元素

0 个答案: