由于该控件目前不可见、未启用或其类型不允许 因此无法将焦点移向它。

我在网上下了个demo，稍微改了下，确实好用，代码如下：<html>       
  <head>       
  <title>Untitled   Document</title>       
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">       
  <script   language="javascript">       
  var   cols=3;       
  var   obj;       
  var   CanMove=false;       
  var   key;       
  function   setobj(input){       
  obj=input;       
  }       
        
  function   init(){       
  document.onkeydown=keyDown;       
  document.onkeyup=keyUp;       
  }       
        
  function   keyDown(DnEvents){       
  var   key=window.event.keyCode;       
  if(key==116){       
  window.event.keyCode=0;       
  return   false;       
  }       
  if(key==8){       
  if(event.srcElement.tagName!="INPUT"){       
  event.cancelBubble   =   true;       
  event.returnValue   =   false;       
  return   false;       
  }       
  }       
  var   IsCtrl=window.event.ctrlKey;       
  if(!IsCtrl){       
  //return;       
  }       
  for(var   i=0;i<document.forms[0].elements.length;i++){       
  if(document.forms[0].elements[i]==obj){       
  if   (key   ==   37){//←       
  if(i>0){       
  document.forms[0].elements[i-1].focus();       
  }       
  }       
  if   (key   ==   38){//↑       
  if(i>cols-1){       
  document.forms[0].elements[i-cols].focus();       
  }       
  }       
  if   (key   ==   39){//→       
  if(i<document.forms[0].elements.length-1){       
  document.forms[0].elements[i+1].focus();       
  }       
  }       
  if   (key   ==   40){//↓       
  if(i<document.forms[0].elements.length-cols){       
  document.forms[0].elements[i+cols].focus();       
  }       
  }       
  }       
  }       
        
  }       
        
  function   keyUp(UpEvents){       
  return   false;       
  }       
  </script>       
  </head>       
        
  <body   bgcolor="#FFFFFF"   text="#000000"   onload="init()">       
  <form>       
  <table   border="0"   cellspacing="0"   cellpadding="0"   align="center">       
      <tr>       
          <td>       
              <select name="a" onfocus="setobj(this)">
  <option value=1>aaa
  <option value=2>bbb
  </select>
          </td>       
          <td>       
              <input   type="text"   name="textfield2"   onfocus="setobj(this)">       
          </td>       
          <td>       
              <input   type="text"   name="textfield3"   onfocus="setobj(this)">       
          </td>       
      </tr>       
      <tr>       
          <td>         
              <select name="b" onfocus="setobj(this)">
  <option value=1>aaa
  <option value=2>bbb
  </select>       
          </td>       
          <td>         
              <input   type="text"   name="textfield6"   onfocus="setobj(this)">       
          </td>       
          <td>         
              <input   type="text"   name="textfield7"   onfocus="setobj(this)">       
          </td>       
      </tr>       
  </table>       
  </form>       
  用Ctrl+方向键可以方便的在控件中移动，你也可以自己改成不要Ctrl的。       
  </body>       
  </html>
但是当我把它用在自己的页面里，就发生了错误，我的页面代码：<html>       
  <head>       
  <title>Untitled   Document</title>       
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">       
  <script   language="javascript">       
  var   cols=6;       
  var   obj;       
  var   CanMove=false;       
  var   key;       
  function   setobj(input){       
  obj=input;       
  }       
        
  function   init(){       
  document.onkeydown=keyDown;       
  document.onkeyup=keyUp;       
  }       
        
  function   keyDown(DnEvents){       
  var   key=window.event.keyCode;       
  if(key==116){       
  window.event.keyCode=0;       
  return   false;       
  }       
  if(key==8){       
  if(event.srcElement.tagName!="INPUT"){       
  event.cancelBubble   =   true;       
  event.returnValue   =   false;       
  return   false;       
  }       
  }       
  var   IsCtrl=window.event.ctrlKey;       
  if(!IsCtrl){       
  //return;       
  }       
  for(var   i=0;i<document.forms[0].elements.length;i++){       
  if(document.forms[0].elements[i]==obj){       
  if   (key   ==   37){//←       
  if(i>0){       
  document.forms[0].elements[i-1].focus();       
  }       
  }       
  if   (key   ==   38){//↑       
  if(i>cols-1){       
  document.forms[0].elements[i-cols].focus();       
  }       
  }       
  if   (key   ==   39){//→       
  if(i<document.forms[0].elements.length-1){       
  document.forms[0].elements[i+1].focus();       
  }       
  }       
  if   (key   ==   40){//↓       
  if(i<document.forms[0].elements.length-cols){       
  document.forms[0].elements[i+cols].focus();       
  }       
  }       
  }       
  }       
        
  }       
        
  function   keyUp(UpEvents){       
  return   false;       
  }       
  </script>       
  </head>       
        
  <body   bgcolor="#FFFFFF"   text="#000000"   onload="init()">       
  <form>       
  <table class="list" cellspacing="0" cellpadding="0">
<tr class="column">
<td width="15%">&nbsp;&nbsp;&nbsp;状态&nbsp;&nbsp;&nbsp;</td>
<td width="15%"><div class="column"  onclick="doOrderBy('flow')">流量(m3/h)&nbsp;<span class="arrow"></span></div></td>
<td width="15%"><div class="column"  onclick="doOrderBy('head')">扬程(m)&nbsp;<span class="arrow"></span></div></td>
<td width="15%"><div class="column"  onclick="doOrderBy('power')">功率(kw)&nbsp;<span class="arrow"></span></div></td>
<td width="15%"><div class="column"  onclick="doOrderBy('efficency')">效率(%)&nbsp;<span class="arrow"></span></div></td>
</tr> <tr id="214" class="list" >
<td>
<select  onfocus="setobj(this)">
<option value="4">忽略
<option value="6">更新
<option value="8">删除
</select>

</td>

<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.0" value="372.99" size="10" onChange="doModify(0)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.0" value="50.5" size="10" onChange="doModify(0)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.0" value="747.2" size="10" onChange="doModify(0)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.0" value="111" size="10" onChange="doModify(0)">&nbsp;</td>
     <input type="hidden" name="bump_curve_id.0" value="214">
    </tr>

<tr id="215" class="listx" >
<td>
<select  onfocus="setobj(this)">
<option value="4">忽略
<option value="6">更新
<option value="8">删除
</select>

</td>

<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.1" value="4352" size="10" onChange="doModify(1)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.1" value="48" size="10" onChange="doModify(1)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.1" value="843.71" size="10" onChange="doModify(1)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.1" value="222" size="10" onChange="doModify(1)">&nbsp;</td>
     <input type="hidden" name="bump_curve_id.1" value="215">
    </tr>

<tr id="216" class="list" >
<td>
<select  onfocus="setobj(this)">
<option value="4">忽略
<option value="6">更新
<option value="8">删除
</select>

</td>

<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.2" value="4766" size="10" onChange="doModify(2)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.2" value="46" size="10" onChange="doModify(2)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.2" value="907.04" size="10" onChange="doModify(2)">&nbsp;</td>
<td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.2" value="333" size="10" onChange="doModify(2)">&nbsp;</td>
     <input type="hidden" name="bump_curve_id.2" value="216">
    </tr>




</table>      
  </form>       
  用Ctrl+方向键可以方便的在控件中移动，你也可以自己改成不要Ctrl的。       
  </body>       
  </html>

解决方案 »

  1.   

    我发现了，原来是input type=hidden的关系？但问题是怎么改呢？还有当焦点在select中按“下”，会使得他下面的select的option往下挪一格，这个怎么办？
      

  2.   

    因为你有一个隐藏控件input
    是不能够focus的
    LZ可以判断下，做下特殊处理
    <html>       
      <head>       
      <title>Untitled   Document</title>       
      <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">       
      <script   language="javascript">       
      var   cols=6;       
      var   obj;       
      var   CanMove=false;       
      var   key;       
      function   setobj(input){       
      obj=input;       
      }       
            
      function   init(){       
      document.onkeydown=keyDown;       
      document.onkeyup=keyUp;       
      }       
            
      function   keyDown(DnEvents){       
      var   key=window.event.keyCode;       
      if(key==116){       
      window.event.keyCode=0;       
      return   false;       
      }       
      if(key==8){       
      if(event.srcElement.tagName!="INPUT"){       
      event.cancelBubble   =   true;       
      event.returnValue   =   false;       
      return   false;       
      }       
      }       
      var   IsCtrl=window.event.ctrlKey;       
      if(!IsCtrl){       
      //return;       
      }       
      for(var   i=0;i<document.forms[0].elements.length;i++){       
      if(document.forms[0].elements[i]==obj){       
      if   (key   ==   37){//←       
      if(i>0){       
      if(i%cols==0){
        document.forms[0].elements[i-2].focus(); 
      }else{
      document.forms[0].elements[i-1].focus();       
      }     
      }  
      }       
      if   (key   ==   38){//↑       
      if(i>cols-1){       
      document.forms[0].elements[i-cols].focus();       
      }       
      }       
      if   (key   ==   39){//→       
       
      if(i%cols==cols-2){
      if(i<document.forms[0].elements.length-2){
      document.forms[0].elements[i+2].focus(); 
      } 
      } else{
        if(i<document.forms[0].elements.length-1){
        document.forms[0].elements[i+1].focus();
        }       
      }       
      }       
      if   (key   ==   40){//↓       
      if(i<document.forms[0].elements.length-cols){       
      document.forms[0].elements[i+cols].focus();       
      }       
      }       
      }       
      }       
            
      }       
            
      function   keyUp(UpEvents){       
      return   false;       
      }       
      </script>       
      </head>       
            
      <body   bgcolor="#FFFFFF"   text="#000000"   onload="init()">       
      <form>       
      <table class="list" cellspacing="0" cellpadding="0">
        <tr class="column">
            <td width="15%">&nbsp;&nbsp;&nbsp;状态&nbsp;&nbsp;&nbsp;</td>
            <td width="15%"><div class="column"  onclick="doOrderBy('flow')">流量(m3/h)&nbsp;<span class="arrow"></span></div></td>
            <td width="15%"><div class="column"  onclick="doOrderBy('head')">扬程(m)&nbsp;<span class="arrow"></span></div></td>
            <td width="15%"><div class="column"  onclick="doOrderBy('power')">功率(kw)&nbsp;<span class="arrow"></span></div></td>
            <td width="15%"><div class="column"  onclick="doOrderBy('efficency')">效率(%)&nbsp;<span class="arrow"></span></div></td>
        </tr>    <tr id="214" class="list" >
            <td>
            <select  onfocus="setobj(this)">
            <option value="4">忽略
            <option value="6">更新
            <option value="8">删除
            </select>
            
            </td>
            
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.0" value="372.99" size="10" onChange="doModify(0)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.0" value="50.5" size="10" onChange="doModify(0)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.0" value="747.2" size="10" onChange="doModify(0)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.0" value="111" size="10" onChange="doModify(0)">&nbsp;</td>
            <input type="hidden" name="bump_curve_id.0" value="214">
        </tr>
        
        <tr id="215" class="listx" >
            <td>
            <select  onfocus="setobj(this)">
            <option value="4">忽略
            <option value="6">更新
            <option value="8">删除
            </select>
            
            </td>
            
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.1" value="4352" size="10" onChange="doModify(1)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.1" value="48" size="10" onChange="doModify(1)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.1" value="843.71" size="10" onChange="doModify(1)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.1" value="222" size="10" onChange="doModify(1)">&nbsp;</td>
            <input type="hidden" name="bump_curve_id.1" value="215">
        </tr>
        
        <tr id="216" class="list" >
            <td>
            <select  onfocus="setobj(this)">
            <option value="4">忽略
            <option value="6">更新
            <option value="8">删除
            </select>
            
            </td>
            
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.2" value="4766" size="10" onChange="doModify(2)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.2" value="46" size="10" onChange="doModify(2)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.2" value="907.04" size="10" onChange="doModify(2)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.2" value="333" size="10" onChange="doModify(2)">&nbsp;</td>
            <input type="hidden" name="bump_curve_id.2" value="216">
        </tr>
        
        
        
        
    </table>      
      </form>       
      用Ctrl+方向键可以方便的在控件中移动，你也可以自己改成不要Ctrl的。       
      </body>       
      </html>
      

  3.   


    <html>       
      <head>       
      <title>Untitled   Document</title>       
      <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">       
      <script   language="javascript">       
      var   cols=6;       
      var   obj;       
      var   CanMove=false;       
      var   key;       
      function   setobj(input){       
      obj=input;       
      }       
            
      function   init(){       
      document.onkeydown=keyDown;       
      document.onkeyup=keyUp;       
      }       
            
      function   keyDown(DnEvents){       
      var   key=window.event.keyCode;       
      if(key==116){       
      window.event.keyCode=0;       
      return   false;       
      }       
      if(key==8){       
      if(event.srcElement.tagName!="INPUT"){       
      event.cancelBubble   =   true;       
      event.returnValue   =   false;       
      return   false;       
      }       
      }       
      var   IsCtrl=window.event.ctrlKey;       
      if(!IsCtrl){       
      //return;       
      }       
      for(var   i=0;i<document.forms[0].elements.length;i++){       
      if(document.forms[0].elements[i]==obj){       
      if   (key   ==   37){//← 
        var n = i-1;
       var d = document.forms[0].elements[n];
       if(!d) return;
       while(d.type == "hidden" && n>0){
       n--;
           d = document.forms[0].elements[n];
           if(!d) break;
       }
        if(n>=0 && document.forms[0].elements[n].type!="hidden") document.forms[0].elements[n].focus();
      }       
      if   (key   ==   38){//↑       
      if(i>cols-1){       
      document.forms[0].elements[i-cols].focus();       
      }       
      }       
      if   (key   ==   39){//→       
      if(i<document.forms[0].elements.length-1){
       var n = i+1;
       var d = document.forms[0].elements[n];
       while(d.type == "hidden" && n<document.forms[0].elements.length){
       n++;
           d = document.forms[0].elements[n];
           if(!d) break;
       }
        if(n<document.forms[0].elements.length && document.forms[0].elements[n].type!="hidden") document.forms[0].elements[n].focus();       
      }       
      }       
      if   (key   ==   40){//↓       
      if(i<document.forms[0].elements.length-cols){       
      document.forms[0].elements[i+cols].focus();       
      }       
      }       
      }       
      }       
            
      }       
            
      function   keyUp(UpEvents){       
      return   false;       
      }       
      </script>       
      </head>       
            
      <body   bgcolor="#FFFFFF"   text="#000000"   onload="init()">       
      <form>       
      <table class="list" cellspacing="0" cellpadding="0">
        <tr class="column">
            <td width="15%">&nbsp;&nbsp;&nbsp;状态&nbsp;&nbsp;&nbsp;</td>
            <td width="15%"><div class="column"  onclick="doOrderBy('flow')">流量(m3/h)&nbsp;<span class="arrow"></span></div></td>
            <td width="15%"><div class="column"  onclick="doOrderBy('head')">扬程(m)&nbsp;<span class="arrow"></span></div></td>
            <td width="15%"><div class="column"  onclick="doOrderBy('power')">功率(kw)&nbsp;<span class="arrow"></span></div></td>
            <td width="15%"><div class="column"  onclick="doOrderBy('efficency')">效率(%)&nbsp;<span class="arrow"></span></div></td>
        </tr>    <tr id="214" class="list" >
            <td>
            <select  onfocus="setobj(this)">
            <option value="4">忽略
            <option value="6">更新
            <option value="8">删除
            </select>
            
            </td>
            
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.0" value="372.99" size="10" onChange="doModify(0)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.0" value="50.5" size="10" onChange="doModify(0)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.0" value="747.2" size="10" onChange="doModify(0)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.0" value="111" size="10" onChange="doModify(0)">&nbsp;</td>
            <input type="hidden" name="bump_curve_id.0" value="214">
        </tr>
        
        <tr id="215" class="listx" >
            <td>
            <select  onfocus="setobj(this)">
            <option value="4">忽略
            <option value="6">更新
            <option value="8">删除
            </select>
            
            </td>
            
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.1" value="4352" size="10" onChange="doModify(1)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.1" value="48" size="10" onChange="doModify(1)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.1" value="843.71" size="10" onChange="doModify(1)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.1" value="222" size="10" onChange="doModify(1)">&nbsp;</td>
            <input type="hidden" name="bump_curve_id.1" value="215">
        </tr>
        
        <tr id="216" class="list" >
            <td>
            <select  onfocus="setobj(this)">
            <option value="4">忽略
            <option value="6">更新
            <option value="8">删除
            </select>
            
            </td>
            
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="flow.2" value="4766" size="10" onChange="doModify(2)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="head.2" value="46" size="10" onChange="doModify(2)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="power.2" value="907.04" size="10" onChange="doModify(2)">&nbsp;</td>
            <td  nowrap><input type="text" class="text" onfocus="setobj(this)" name="efficency.2" value="333" size="10" onChange="doModify(2)">&nbsp;</td>
            <input type="hidden" name="bump_curve_id.2" value="216">
        </tr>
        
        
        
        
    </table>      
      </form>       
      用Ctrl+方向键可以方便的在控件中移动，你也可以自己改成不要Ctrl的。       
      </body>       
      </html>
      

  4.   


    这个问题只要在keyDown函数的最后加上return false;即可
    即取消此次按键事件