再次求助JS高手价值200分

http://community.csdn.net/Expert/topic/5737/5737056.xml?temp=.6565973

解决方案 »

  1.   

    可能是我没有说明白,再表达一次
    我想实现的效果就是将text设置为菜单,当text获得焦点时,点方向键"->"自动打开父菜单下的子菜单,然后点"<-"关闭其子菜单,点enter则打开菜单的url.
      

  2.   

    我看了一下,需求有问题吧.你给出的代码得到焦点按方向键是移动到下一个input嘛.
    那么可以这样理解吗?
    加入一批填充子菜单的div(ajax动态填充亦可)如果text获得焦点,而对应子菜单非显示状态,则显示子菜单.如果子菜单显示情况下,上下移动子菜单item(子菜单为纵向),左右则将焦点移到上/下一个input.建议给input赋规则id,通过id来处理,比较清晰.
      

  3.   

    用你写的那个简单的改了下，你看下吧<html>
    <head>
    <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>
    </head>
    <body>
    <script defer>
    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{
    //alert(event.keyCode);
    if(event.keyCode==13){
    //alert("现在访问URL");
    window.open();
    }
            //按esc键退出
           
    if(event.keycode == 27)
          window.closed();
    if(event.keyCode==40)
    event.srcElement.nextSibling.nextSibling.focus()
    else if(event.keyCode==38)
    event.srcElement.previousSibling.previousSibling.focus()
         else if(event.keyCode==37){
     var xxx = event.srcElement;
     if(xxx.id == "bb"){
        bbb.style.display = "none";
     }else if(xxx.id == "cc"){
        ccc.style.display = "none";
     }else if(xxx.id == "dd"){
        ddd.style.display = "none";
     }
     }  else if(event.keyCode==39){
         var xxx = event.srcElement;
     if(xxx.id == "bb"){
        bbb.style.display = "block";
     }else if(xxx.id == "cc"){
        ccc.style.display = "block";
     }else if(xxx.id == "dd"){
        ddd.style.display = "block";
     }
      }}catch(e){}
    }function url(obj){
    urlpath =obj.value;
    //window.location.href=obj;
    //alert(obj.value);
    }
    </script>
    <table>
    <tr><td>
    <div id="aaa">
    <input type=text class="in200" value="http://www.google.com" onfocus="this.select();url(this)" size="40" id="bb"><br>
    <input type=text class="in80" value="菜单2" onfocus="this.select();url(this)" id="cc"><br>
    <input type=text class="in80" value="菜单3" onfocus="this.select();url(this)"  id="dd">
    </div>
    </td>
    <td>
    <div style="display:none " id="bbb"><input type=text class="in80" value="菜单4" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单5" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单6" onfocus=this.select() ></div>
    <div style="display:none " id="ccc"> 
    <input type=text class="in80" value="菜单7" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单8" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单9" onfocus=this.select() ></div> 
    <div style="display:none " id="ddd">
    <input type=text class="in80" value="菜单10" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单11" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单12" onfocus=this.select() ></div> </td></tr>
    </table>
    </body>
    </html>
      

  4.   

    又改了一下<html>
    <head>
    <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>
    </head>
    <body>
    <script defer>
    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{
    //alert(event.keyCode);
    if(event.keyCode==13){
    //alert("现在访问URL");
    window.open();
    }
            //按esc键退出
           
    if(event.keycode == 27)
          window.closed();
    if(event.keyCode==40){
    event.srcElement.nextSibling.nextSibling.focus();
    showNone();
    }
    else if(event.keyCode==38){
    event.srcElement.previousSibling.previousSibling.focus();
    showNone();
    }     else if(event.keyCode==37){
     var xxx = event.srcElement;
     if(xxx.id == "bb"){
        bbb.style.display = "none";
     }else if(xxx.id == "cc"){
        ccc.style.display = "none";
     }else if(xxx.id == "dd"){
        ddd.style.display = "none";
     }
     }  else if(event.keyCode==39){
         var xxx = event.srcElement;
     if(xxx.id == "bb"){
        bbb.style.display = "block";
     }else if(xxx.id == "cc"){
        ccc.style.display = "block";
     }else if(xxx.id == "dd"){
        ddd.style.display = "block";
     }
      }}catch(e){}
    }function url(obj){
    urlpath =obj.value;
    //window.location.href=obj;
    //alert(obj.value);
    }
    function showNone(){
    bbb.style.display = "none";
    ccc.style.display = "none";
    ddd.style.display = "none";
    }
    </script>
    <table>
    <tr><td>
    <div id="aaa">
    <input type=text class="in200" value="http://www.google.com" onfocus="this.select();url(this)" size="40" id="bb"><br>
    <input type=text class="in80" value="菜单2" onfocus="this.select();url(this)" id="cc"><br>
    <input type=text class="in80" value="菜单3" onfocus="this.select();url(this)"  id="dd">
    </div>
    </td>
    <td>
    <div style="display:none " id="bbb"><input type=text class="in80" value="菜单4" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单5" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单6" onfocus=this.select() ></div>
    <div style="display:none " id="ccc"> 
    <input type=text class="in80" value="菜单7" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单8" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单9" onfocus=this.select() ></div> 
    <div style="display:none " id="ddd">
    <input type=text class="in80" value="菜单10" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单11" onfocus=this.select() ><br>
    <input type=text class="in80" value="菜单12" onfocus=this.select() ></div> </td></tr>
    </table>
    </body>
    </html>
      

  5.   

    衷心感谢你  mbx615(白天鬼混挣钱，晚上挣钱鬼混) 200分马上打到你的户头 请您再去我的另一个贴说句话 那个贴是100分 和这个加起来正好200分 地址是
    http://community.csdn.net/Expert/topic/5737/5737056.xml?temp=.6565973