jQuery:延迟Onchange功能

Question

我的onchange函数有问题。我要做的是当用户进入输入并在不添加任何值的情况下脱离时，应该表明输入是空的。对于文本框，它不起作用。除了输入年度时，还应有4个数字，但是当键入4个数字时，我可以告诉我可以在键入最后一个数字之前获得该值的错误。我该如何解决？谢谢！

<script>
            //Here is the number validation function
            $(document).ready(function(){
                $("input").keydown(function(a){
                    var howMany = 0;
                    //Here I am getting the key code and making it into a string
                    a = String.fromCharCode(a.keyCode);
                    //Here I make the other keys I want to use and
                    //Storing them into variables
                    var backspaceKey = String.fromCharCode(8);
                    var tabKey = String.fromCharCode(9);
                    var enterKey = String.fromCharCode(13);
                    howMany = $("#year").val();
                    //Validating the input here, no more than 4 numbers and
                    //backspace and other functional keys are included
                    if(howMany.length > 3){
                        if(a == backspaceKey ||
                          a == tabKey ||
                          a == enterKey){
                            return true;
                        }else{
                            return false;
                        }
                    }
                });
                $("#year").on('change',function(){
                    if(!$("#year").val()){
                        alert("empty");
                        emptyBox("#year");
                        errorBox("#year");
                        return false;
                    }else if($("#year").val() != 4){
                        errorBox("#year");
                        alert("short num");
                    }
                });
                $("#submit").click(function(){                    
                    var year = $("#year").val();
                    var description = $("#description").val();
                    if(!$.trim($("#year").val())){
                        alert("True year");
                        emptyBox("#year");
                        errorBox("#year");
                        return false;
                    }
                    if(!$.trim($("#description").val())){
                        alert("true" + description);
                        emptyBox("#description");
                        errorBox("#description");
                        return false;
                    }
                });
            });

            //Takes away the error
            function validated(name){
                //$(name).after
            }

            //checks if its empty
            function emptyBox(name){
                $(name).after("<p class='text-center'>Error, Cannot be empty</p>");
            }
            //Function that changes the color of the input box if error
            function errorBox(name){
                $(name).css({
                    border: "2px solid red"
                })
            }
        </script>


<label for="year">Year</label>
                    <input type="number" class="form-control year" id="year" placeholder="Enter the Year of Event" onchange="year()">
                    <br>
                    <lable for="description">Description</lable>
                    <textarea id="description" class="form-control" placeholder="Describe the Event"></textarea>

演示：https：//jsfiddle.net/efoc/tx51jj2v/

Answer 1

一个建议，以实现大小不超过4个字符的输入就是简单地使用 maxlength属性。

否则，最好检查条件下的val长度，例如：

$("#year").val().length > 0