如何限制一个字段只能输入4个数字字符？ [英] How to restrict a field to take only 4 numeric characters as input?

问题描述

我想要一个文本字段只取数字和一些控制键，数字应该是四位数，而不是更少。我的验证码是

I wanted a text field to take only numbers ans some control keys and number should be exactly four digit long, not less not more. My validation code is

function checkValidInput()
{
        $(".validateYearTextBox").keydown(function(event)
        {
            // Allow only delete, backspace,left arrow,right arraow and Tab
            if ( 
                   event.keyCode == 46 //delete
                || event.keyCode == 8  //backspace
                || event.keyCode == 37 //leftarow
                || event.keyCode == 39 //rightarrow
                || event.keyCode == 9  //tab
                )
                {
                // let it happen, don't do anything
                }
                else {
                    // Ensure that it is a number and stop the keypress
                    if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode <96 ||event.keyCode > 105) ) {
                        event.preventDefault(); 
                    }   
                }
        });

       $(".validateYearTextBox").keyup(function(event)
            {
                 var val = $(this).val();
                 if (val.length > 4){
                    alert ("Max length is 4");
                    val = val.substring(0, valore.length - 1);
                    $(this).val(val);
                    $(this).focus();
                    return false;
                  }
            });

}

这里，我的第一次验证工作正常，但是我发送了一份不管用。

Here, my first validation is working, but my send one is not working.

我在我的aspx页面中调用此验证函数，如下所示

I am calling this validation function in my aspx page like this

<script type="text/javascript">   
    $(document).ready(function(){
        checkValidInput(); 
    }
</script>

出了什么问题？

推荐答案

简化它：

function checkValidInput() {
    // Allow only delete, backspace, left arrow, right arrow, 
    // Tab, ctrl+v and numbers
    $(".validateYearTextBox").keydown(function(event) {
        if (!((event.keyCode == 46 || 
            event.keyCode == 8  || 
            event.keyCode == 37 || 
            event.keyCode == 39 || 
            event.keyCode == 9) || 
            (event.ctrlKey && event.keyCode == 86) ||  // Edit: Added to allow ctrl+v
            $(this).val().length < 4 &&
            ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105)))) {
            // Stop the event
            event.preventDefault();
            return false;
        }
    });
    // Edit: Added validate after copy+paste.
    // This removes non-numeric characters and truncates the length
    // to 4 if the user copy + pasted.
    $(".validateYearTextBox").change(function(event) {
        var value =  $(this).val();
        value = value.replace(/[^0-9]/g,'');
        value = value.substr(0,4);
        $(this).val(value);
    });
}


$(document).ready(function() {
    checkValidInput();
});

http://jsfiddle.net/nwellcome/687kD/

编辑：我个人喜欢蒙面输入 jQuery插件，但如果你需要做的话，这可能是一个严厉的解决方案。

Personally I like the Masked Input jQuery plugin but that might be a heavy-handed solution if this is all you need to do.

这篇关于如何限制一个字段只能输入4个数字字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！