将4号自动选项卡填充到下一个输入字段后

时间:2014-05-26 11:32:30

标签: javascript html css

需要帮助才能做到这一点。

我使用过的代码。

Fiddle

<div class="col-1 paddingright "><input type="number" id="num1"  maxlength="4" ></div>
<div class="col-1 paddingright"><input type="number"  id="num2"   maxlength="4" ></div>
<div class="col-1 paddingright"><input type="number"  id="num3"  maxlength="4"  ></div>
<div class="col-1"><input type="number" maxlength="4" id="num4"  ></div>

使用

(function (){   
   $("#num1,#num2,#num3,#num4").on("keyup", function (e) {          
     var maxlength = 4;         
     var num1 = $("#num1").val().length;        
     var num2 = $("#num2").val().length;        
     var num3 = $("#num3").val().length;        
     var num4 = $("#num4").val().length;         
     $(this).val($(this).val().replace(/[^0-9\.]/g,''));                
     if ( num1 &gt;= 4) {           
       $("#num2").focus();          
     }          
     if( num2 &gt;= 4){           
       $("#num3").focus();          
     }          
     if( num3 &gt;= 4){          
       $("#num4").focus();          
     }       
  });    
})();

2 个答案:

答案 0 :(得分:1)

function tab(original, destination) {
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
destination.focus()
}


<input type="number" id="num1" maxlength="4" onKeyup"tab(this, document.yourform.num2)" />
<input type="number" id="num2" maxlength="4" onKeyup"tab(this, document.yourform.num3)" />
<input type="number" id="num3" maxlength="4" onKeyup"tab(this, document.yourform.num4)" />
<input type="number" id="num4" maxlength="4" />

这些方面的东西。

答案 1 :(得分:-1)

试试这个

(function (){
$("#num1, #num2, #num3, #num4").on("keydown", function (t) {
    //add the key's you want to accept such as backspace or arrow keys etc.
    if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
    var maxlength = 4;
    var num1 = $("#num1").val().length;
    var num2 = $("#num2").val().length;
    var num3 = $("#num3").val().length;
    var num4 = $("#num4").val().length;
    $(this).val($(this).val().replace(/[^0-9\.]/g,''));

    if ( num1 >= 4) {
        $("#num2").focus();
        if( num2 >= 4){
            $("#num3").focus();
            if( num3 >= 4){
                $("#num4").focus();
                if (num4>=4){
                    $("#num4").val($("#num4").val().substr(0,3));
                }
            }

        }
    }     
    }

  });   
})();