键盘控制级联菜单

最新推荐文章于 2025-09-13 12:59:37 发布

原创最新推荐文章于 2025-09-13 12:59:37 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#menu #input #class #url #function #div

javascript 专栏收录该内容

7 篇文章

订阅专栏

<html>
<head>
<title>键盘控制级联菜单</title>
<style type="text/css">
input {border:1px solid #fff;　background:#fff; }
input {star : expression(
onmouseover=function(){this.style.backgroundColor="#eee"},
onmouseout=function(){this.style.backgroundColor="#fff"})}
.in40 {width:40px;}
.in80 {width:80px;}
.in120 {width:120px;}
.in200 {width:200px;}
</style>
<script defer>
var root=["menu1","menu2","menu3"];
var menu1=["menu1.1","menu1.2"];
var menu2=["menu2.1","menu2.2"];
var menu3=["menu3.1","menu3.2"];
var obj=document.getElementsByTagName("input");
var urlpath = "";
for(var i=0;i<obj.length;i++){
if(obj[i].input){
  obj[i].focus();
  break;
}
}
document.onkeydown=function(){
try{
  if(event.keyCode==13){
   window.open(urlpath);
  }
  if(event.keycode == 27){
   window.closed();
  }
  if(event.keyCode==40){//下
   if(event.srcElement.submenu){
    if(document.getElementById(event.srcElement.submenu).style.display=="block"){
     var arr=eval(event.srcElement.name);
     document.getElementsByName(arr[0])[0].focus();
    }else{
     var parentMenu=event.srcElement.parentMenu;
     var selfName=event.srcElement.name;
     var arr=eval(event.srcElement.parentMenu);
     var n;
     for(var i=0;i<arr.length;i++){
      if(arr[i]==selfName){
       n=i;
       break;
      }
     }
     if(n!=arr.length-1){
      document.getElementsByName(arr[n+1])[0].focus();
     }
    }
   }else{
    var parentMenu=event.srcElement.parentMenu;
    var selfName=event.srcElement.name;
    var arr=eval(parentMenu);
    var n;
    for(var i=0;i<arr.length;i++){
     if(arr[i]==selfName){
      n=i;
      break;
     }
    }
    if(n!=arr.length-1){
     document.getElementsByName(arr[n+1])[0].focus();
    }else{
     selfName=parentMenu;
     parentMenu=document.getElementsByName(parentMenu)[0].parentMenu;
     var arr=eval(parentMenu);
     var n;
     for(var i=0;i<arr.length;i++){
      if(arr[i]==selfName){
       n=i;
       break;
      }
     }
     if(n!=arr.length-1){
      document.getElementsByName(arr[n+1])[0].focus();
     }
    }
   }
  }
  else if(event.keyCode==38){//上
   var parentMenu=event.srcElement.parentMenu;
   var selfName=event.srcElement.name;
   var arr=eval(event.srcElement.parentMenu);
   var n;
   for(var i=0;i<arr.length;i++){
    if(arr[i]==selfName){
     n=i;
     break;
    }
   }
   if(n>0){
    var preMenu=document.getElementsByName(arr[n-1])[0];
    if(preMenu.submenu){
     var preSubDiv=document.getElementById(preMenu.submenu);
     if(preSubDiv.style.display=="none"){
      preMenu.focus();
     }else{
      var preSubArr=eval(arr[n-1]);
      var focusMenu=document.getElementsByName(preSubArr[preSubArr.length-1])[0];
      focusMenu.focus();
     }
    }else{
     preMenu.focus();
    }
   }else{
    if(parentMenu!="root"){
     document.getElementsByName(parentMenu)[0].focus();
    }
   }
  }
  else if(event.keyCode==37){//左
   if(event.srcElement.submenu){
    document.getElementById(event.srcElement.submenu).style.display="none";
   }
  }
  else if(event.keyCode==39){//右
   if(event.srcElement.submenu){
    document.getElementById(event.srcElement.submenu).style.display="block";
    }
  }
}catch(e){
}
}

function url(obj){
urlpath =obj.value;
}
</script>
</head>
<body>
键盘控制级联菜单演示：
<div style="position:absolute;left:10px;top:50px">
<input type=text name="menu1" class="in200" submenu="submenu1" parentMenu="root" value="http://www.google.com" onfocus="this.select();url(this)" size="40" readonly="readonly"><br>
<div id="submenu1" style="display:none">
<input type=text name="menu1.1" parentMenu="menu1" class="in80" value="    菜单1.1" onfocus="this.select();url(this)" readonly="readonly"><br/>
<input type=text name="menu1.2" parentMenu="menu1" class="in80" value="    菜单1.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
<input type=text name="menu2" class="in200" submenu="submenu2" parentMenu="root" value="http://www.google.com" onfocus="this.select();url(this)" size="40" readonly="readonly"><br>
<div id="submenu2" style="display:none">
<input type=text name="menu2.1" parentMenu="menu2" class="in80" value="    菜单2.1" onfocus="this.select();url(this)" readonly="readonly"><br>
<input type=text name="menu2.2" parentMenu="menu2" class="in80" value="    菜单2.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
<input type=text name="menu3" class="in200" submenu="submenu3" parentMenu="root" value="http://www.google.com" onfocus="this.select();url(this)" size="40" readonly="readonly">
<div id="submenu3" style="display:none">
<input type=text name="menu3.1" parentMenu="menu3" class="in80" value="    菜单3.1" onfocus="this.select();url(this)" readonly="readonly"><br>
<input type=text name="menu3.2" parentMenu="menu3" class="in80" value="    菜单3.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
</div>
</body>
</html>