Javascript 如何限制字段仅接受4个数字字符作为输入？

我想要一个文本字段只包含数字和一些控制键，数字应该正好是四位数，不能少也不能多。我的验证码是

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;
                  }
            });

}

函数checkValidInput（）
{
$（“.validateyartextbox”）.keydown（函数（事件）
{
//仅允许删除、退格、左箭头、右箭头和制表符
如果（
event.keyCode==46//删除
||event.keyCode==8//退格
||event.keyCode==37//leftarow
||event.keyCode==39//rightarrow
||event.keyCode==9//tab
)
{
//让它发生吧，什么都不要做
}
否则{
//确保它是一个数字并停止按键
如果（（event.keyCode<48 | | event.keyCode>57）和&（event.keyCode 105））{
event.preventDefault（）；
}   
}
});
$（“.validateyartextbox”）.keyup（函数（事件）
{
var val=$（this.val（）；
如果（值长度>4）{
警报（“最大长度为4”）；
val=val.substring（0，valore.length-1）；
$（this）.val（val）；
$（this.focus（）；
返回false；
}
});
}

在这里，我的第一次验证工作正常，但我的发送验证不工作

我在我的aspx页面中这样调用这个验证函数

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

$（文档）.ready（函数（）{
checkValidInput（）；
}

出了什么问题？

简化它：

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();
});

函数checkValidInput（）{
//仅允许删除、退格、左箭头、右箭头、，
//制表符、ctrl+v和数字
$（“.validateyartextbox”）.keydown（函数（事件）{
如果（！（（event.keyCode==46 | |
event.keyCode==8 | |
event.keyCode==37 | |
event.keyCode==39 | |
event.keyCode==9）|
（event.ctrlKey&&event.keyCode==86）| |//编辑：添加以允许ctrl+v
$（this）.val（）.length<4&&
（（event.keyCode>=48&&event.keyCode=96&&event.keyCode有一些jQuery插件已经以一种或另一种形式完成了这项工作

如果可以的话，我建议使用现有的、有效的、经过验证的东西，而不是重新发明

1如果用户试图输入超过
n
个字符，它似乎唯一没有做的就是显示一个错误，但我确信您可以修改插件或在
中添加长度检查。这里有一个简单的方法。在事件更改文本之前存储旧文本。然后检查新文本是否有效或无效不是。如果不是，则返回到旧文本。为了进一步确保最多4个字符，请为所有
元素添加
maxlength
属性

jQuery.fn.forceNumericOnly = function() {
    return this.each(function() {
        var oldText;

        $(this).keyup(function(e) {
            var newText = $(this).val();

            if (newText != "" && (isNaN(newText) || val.length > 4))
                $(this).val(oldText);
            else
                oldText = $(this).val();
        })

        $(this).blur(function(e) {
            var newText = $(this).val();

            if (newText != "" && (isNaN(newText) || val.length > 4))
                $(this).val(newText = oldText);
            else
                oldText = $(this).val();
        });
    })
};

$(".validateYearTextBox").forceNumericOnly();

使用正则表达式：

enter code here
function validator(elem,msg)
{
var exp=/^([0-9]+)$/; //it only allows for numbers
if(elem.value.match(exp))
{return true;}
else
{
  alert(msg);
  elem.focus();
  return false;
}
}

html代码：

enter code here
<html><head>
<script src="javasript.js" type="text/javascript">
</head>
<body>
     <form method=POST>
     <input type='text' maxlength=4 name='num' id='num'>
     <input type='submit' value=OK onClick="validator(document.getElementById('num'),'Only four numbers and numbers only!');">
     </form> //the maxlength in input text tag restrict the maximum length of the input
     </body></html>

在此处输入代码
//输入文本标记中的maxlength限制输入的最大长度
为此使用HTML input maxlength属性，并在相同的input size属性中设置固定宽度4的大小值

<input type="text" maxlength="4" size="4">

这里有一个简单的答案，可以解决复制粘贴和所有问题

$(document).on("input", ".validateYearTextBox", function() {
    var value = this.value
    value = value.replace(/\D/g,'');
    for (i = 0; i < value.length; i++) {
        if (i > 3) {
            value = value.replace(value[i], '')
        }
    }
});

$（document）.on（“输入”，“.validateYearTextBox”，函数（）{
var值=此.value
值=值。替换（/\D/g'）；
对于（i=0；i3）{
值=值。替换（值[i]，“”）
}
}
});
你所说的“不工作”是什么意思？你必须包括真实的细节，否则回答者只是猜测。在什么情况下/输入，当你发出警报（val.length）时会发生什么

在你的

之前，如果
，你希望发生什么，你的
按键事件中每一行实际发生了什么，等等？@p.campbell：对不起，让我稍微修改一下我的代码，然后再确认并建议，我会给出确切的细节，don wory.Goooood point，所以也许应该使用$（）.change（）完成；让我来解决这个问题。但我可以先粘贴字母字符！请不要重新发明，请尝试使用现有的插件（请参阅我的答案，并且已经在您的答案中推荐）。我怀疑插件的开销远远超过了已经花费的时间。我同意你关于使用插件与重新发明验证的观点，将我的回答的这一部分移到顶部是否合适？你能解释一下为什么这会回答这个问题吗？关于你答案的更多细节确实会有帮助请编辑并解释你的答案，否则恐怕会被删除。
<input type="text" maxlength="4" size="4">

$(document).on("input", ".validateYearTextBox", function() {
    var value = this.value
    value = value.replace(/\D/g,'');
    for (i = 0; i < value.length; i++) {
        if (i > 3) {
            value = value.replace(value[i], '')
        }
    }
});