在每个需要得到焦点的空间上调用onkeydown事件

解决方案 »

  1.   

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="javascript">
    var cols=4;
    var obj;
    var CanMove=false;
    var key;
    function setobj(input){
    obj=input;//捕获当前控件对象;
    }//初始化,用KeyDown和KeyUp方法改写原来的onkeydown和onkeyup方法;
    function init(){
    document.onkeydown=keyDown;
    document.onkeyup=keyUp;
    }
    function keyDown(DnEvents){
    var key=window.event.keyCode;
    if(key==116){
    window.event.keyCode=0;//屏蔽F5(刷新)键;
    return false;
    }
    if(key==8){
    if(event.srcElement.tagName!="INPUT"){
    event.cancelBubble = true;//如果控件当前类型为“input”,屏蔽退格键;
    event.returnValue = false;
    return false;
    }
    }
    //在按下Ctrl键时,对方向键进行侦听,并且是光标在各个控件中移动;
    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>
          <input type="text" name="textfield" onfocus="setobj(this)">
        </td>
        <td>
          <select name="textfield2" onfocus="setobj(this)">
    <option>1
    <option>2
    </select>
        </td>
        <td>
          <input type="radio" name="textfield3" onfocus="setobj(this)">radio
        </td>
        <td>
          <input type="radio" name="textfield3" onfocus="setobj(this)">radio
        </td>
      </tr>
      <tr>
        <td> 
          <input type="text" name="textfield5" onfocus="setobj(this)">
        </td>
        <td> 
          <input type="checkbox" name="check1" onfocus="setobj(this)">check1
        </td>
        <td> 
          <input type="checkbox" name="check2" onfocus="setobj(this)">check2
        </td>
        <td>
          <input type="text" name="textfield8" onfocus="setobj(this)">
        </td>
      </tr>
    </table>
    </form>
    用Ctrl+方向键可以方便的在控件中移动
    </body>
    </html>