怎样在控件之间根据条件自动切换焦点？

比如当一个input text或textbox中文本达到一定长度后，焦点自动跳到下一个控件

解决方案 »

  1.   

    在input text或textbox添加onchang事件
    当达到条件后，下一个控件.focus()
      

  2.   

    <input type="text" name="x" id="x" onkeyup="jj()" />
    <input type="text" name="y" id="y" />
    <script language="javascript">
    function jj(){
    if (document.getElementById("x").value.length==10){
    document.getElementById("y").focus()
    }
    }</script>
      

  3.   


    <!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>测试</title>
    <style></style>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(function(){
    $(".input").keyup(function(){
    var value = $(this).val();
    if(value.length>=5){//最多填五个字符
    $(this).next().focus();
    }
    });
    });
    </script>
    </head><body>
    <input type="text" id="input1" class="input" />
    <input type="text" id="input2" class="input" />
    <input type="text" id="input3" class="input" />
    </body>
    </html>
    jquery的和js的原理是一样的
      

  4.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script>
    //如果长度大于等于4，则切换焦点
    function proChange(o){
    if(o.value.length>=4){
    do{
    o = o.nextSibling;
    }while(o!=null&&o.tagName!='INPUT');

    if(o!=null){
    o.focus();
    }
    }
    }
    </script>
    </head><body>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <br>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <br>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" value=""/>
    <input type="text" onpropertychange="proChange(this)" maxlength=4 value=""/>
    </body></html>