如何在多个文本框中实现焦点的转移

也就是当你输入完一个文本框后,点任意键焦点转移到下面的文本框中

解决方案 »

  1.   

    也就是当你输入完一个文本框后,点任意键焦点转移到下面的文本框中 我晕，还点任意键转移，那程序怎么知道你是输完了文本框呢？我输了ustbwuyi，然后又输入了一个u，那怎么知道这是要转移还是没输完？
      

  2.   

    <SCRIPT language="javascript">
    <!--
     function document.onkeydown()
     {
     switch(event.keyCode)
        {
    case 13:
    case 39:
    case 40:
    GoOtherText(1);
    break;
    case 37:
    case 38:GoOtherText(-1);break;
    default:
    break;
        }
        
        
          
     }
     
     function GoOtherText(iDirection)
     {
    var i= event.srcElement.sourceIndex;
    var obj = document.all[i+iDirection];while(i>=0  && obj.tagName.toUpperCase() !="INPUT")
    {  
    obj = document.all[i+iDirection];
    i+= iDirection;
    if(i==-1||i>=document.all.length) return;
        }
        window.status = i;
      
    if(obj.tagName.toUpperCase() == "INPUT" && obj.type== "text")
    { 
    obj.focus();
    obj.select();
     
    }
     }
      
    //-->
    </SCRIPT>
      

  3.   

    如果是按回车键触发，很容易实现
    <input type=text id=text1 onkeyup=ustbwuyi() />
    <input type=text id=text2  />
    <script language=javascript> function ustbwuyi
    {
     if(event.keyCode==13)
    {
     document.getElementById("text2").focus();
    }
    }</script>
      

  4.   

    你需要设定一下每个文本框的maxlength属性，或者自己在程序里面给一个判断长度的标准
    然后在文本框的onkeyup事件里面判断是否目前输入的长度达到了你的规定，达到的话就转移
    给你一个简单例子，你可以扩展一下
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript">
    function test(e)
    {
    if(e.value.length == e.maxLength)
    {
    var tx2 = document.getElementById("tx2");
    tx2.focus();
    }
    }
    </script>
    </head><body>
    <input type="text" maxlength="5" id="tx1" width="50px" onkeyup="test(this);" />
    <input type="text" maxlength="5" id="tx2" width="50px" />
    </body>
    </html>