Question

我需要验证这些输入文件，

只能输入四个号码。
只能输入数字。
如果填写4个用户输入，则自动选项卡。

HTML，

<div class="row clearfix">
    <ul class="clearfix">
        <li><input type="number" id="num1"></li>
        <li><input type="number" id="num2"></li>
        <li><input type="number" id="num3"></li>
        <li><input type="number" id="num4"></li>
    </ul>
</div>

的CSS，

.row { 
    display:block;
    position:relative;
    width:500px;
}
.clearfix:before,.clearfix:after {  
    visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0; display:table;
}
ul { 
    list-style:none;
    display:block;
}
.row ul li { float:left; width:75px; margin-right:2px; }

JS，

$("#num3").on('keypress', function (event) {
        var key = event.keyCode || event.charCode;
        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($(this).val().length <=  3){
            $('#num3').css('background','#ECECEC');
        }else if(($(this).val().length ==  4)  && (key == 8 || key == 46)){
            $('#num3').css('background','#ECECEC');
        }
        else{
            $('#num4').focus();
            return false;
        }

以下是代码：Demo

Answer 1

你是说这个？

$(function() {
  $("input[id^='num']").on('keyup', function (event) {
    var key = event.keyCode || event.charCode;
    var maxlength = 4;
    $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
    var len = $(this).val().length;
    if ((len < maxlength) || 
        (len == maxlength && (key == 8 || key == 46))) {
        $(this).css('background', '#ECECEC');
    } else {
        $(this).css('background', 'white');
        $(this).closest("li").next().find("input").focus();
        return false;
    }
  });
});

.row {
    display:block;
    position:relative;
    width:500px;
}
.clearfix:before, .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
    display:table;
}
ul {
    list-style:none;
    display:block;
}
.row ul li {
    float:left;
    width:75px;
    margin-right:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row clearfix">
    <ul class="clearfix">
        <li>
            <input type="number" id="num1">
        </li>
        <li>
            <input type="number" id="num2">
        </li>
        <li>
            <input type="number" id="num3">
        </li>
        <li>
            <input type="number" id="num4">
        </li>
    </ul>
</div>

Answer 2

这很有效，也很干净。

$(document).ready(function(){
        $("input").keypress(function(event){
            var x = event.which || event.keyCode;
            if (x<48||x>57){
            return false;
            }
            console.log(parseInt($(this).attr("id")));
            if  (($(this).val().length+1)==4){
                  $(this).parent().next().find("input").focus();
            }

        });

    });

只需将输入ID更改为1,2,3,4

即可

http://jsfiddle.net/rvcu7zhg/2/

如何验证输入字段？

2 个答案: