Javascript 不允许用户输入大于12的数字

我有一个HTML文本框，如下所示：

<input style="width: 13%; height: 25%" name="txthour" id="txthour" onkeypress="return isNumberKey(event)">

---

但是，如果输入13，则不会取消文本。

您的代码的第一个问题是您将其绑定到按键上。这意味着$txthour.val将不会在事件之前更新

您需要知道用户按下了哪个字符。这里有一个函数：String.fromCharCode

要获取当前字符，可以使用以下命令：

var currentChar = parseInt(String.fromCharCode(e.keyCode), 10);

然后您需要检查它是否是一个数字：

if(!isNaN(currentChar))

然后需要将该字符连接到输入：

var nextValue = $("#txthour").val() + currentChar; //It's a string concatenation, not an addition

解析新值并检查它是否小于或等于12。如果所有这些条件都匹配，则返回true

最终代码：

function isNumberKey(e) {
    var currentChar = parseInt(String.fromCharCode(e.keyCode), 10);
    if(!isNaN(currentChar)){
        var nextValue = $("#txthour").val() + currentChar; //It's a string concatenation, not an addition
        
        if(parseInt(nextValue, 10) <= 12) return true;
    }
    
    return false;
}

编辑 要允许按enter键，您需要检查keycode是否为13：

function isNumberKey(e) {
    if(e.keyCode === 13) return true;
    var currentChar = parseInt(String.fromCharCode(e.keyCode), 10);
    if(!isNaN(currentChar)){
        var nextValue = $("#txthour").val() + currentChar; //It's a string concatenation, not an addition
        
        if(parseInt(nextValue, 10) <= 12) return true;
    }
    
    return false;
}

请尝试以下方法：

            function isNumberKey(e)
        {
            var exString = $('#txthour').val();
            var newString = exString + String.fromCharCode(e.keyCode);

            if (isNaN(newString))
            {
                alert("Enter only numbers");
            }

            if (newString > 12)
            {
                e.preventDefault();
            }
        }

原始代码无法工作的原因是，当调用keydown事件时，文本框的值尚未设置。上面的代码根据您的击键计算出该值，然后检查未来值是否大于12。如果是这样，那么preventDefault调用将取消您的输入。

jQuery解决方案：

1检查以确保用户只输入数字

2确保输入的数字为12或更低

3根据用户不符合的标准向用户发出警报，并清除输入字段

4还说明用户将某些内容粘贴到字段中

$('#txthour').on('paste input', function () {
    var number = $(this).val()
    if (isNaN(number)) {
        alert("Enter only numbers.");
        $(this).val('');
    }

    if (number > 12) {
        alert("Value entered must be 12 or lower.");
        $(this).val('');
    }
});

问题是：

当用户键入一个值并且您正在收听onkeypress事件时，您希望能够看到结果值是什么，以便您可以将该新值与其他值进行比较，然后确定是否要通过event.preventDefault方法阻止该输入

以下是我的解决方案：

1计算真正的新值与以前编写的大多数答案不同，这些答案会产生一个巨大的错误假设我的用户只会在输入字段的最末端键入一个值，我会考虑这样一个事实，即用户实际上可以选择现有输入并覆盖它…即[按键前]inputField=12345，用户选择12345并按键5，这意味着新值为5，或者如果用户选择234并按键5，则结果值为155

2获得最终真值后，现在可以使用isNaN方法测试最终值是否为有效数字，或者只需将最终值传递给您自己的方法进行所需的比较，并通过调用event.preventDefault方法决定停止事件。下面是实现这一点的示例代码

    $(document).keypress(function(event)
    {
    //this is just a container object for readability purposes
    let eventData = {
        element: null,
        userinput: "",
        fieldname: "",
        fieldValue: null,
        selectionStart: -1,
        selectionEnd: -1
    }

    eventData.fieldName = event.target.id;
    eventData.element = document.getElementById(eventData.fieldName);
    eventData.fieldValue = element.value; //holds the value before modification
    eventData.input = String.fromCharCode(event.keyCode); //what ever the user typed!
    eventData.selectionStart = event.target.selectionStart;//this records
    eventData.selectionEnd = event.target.selectionEnd;//the user selection if any

    let finalValue = getFinalValue(eventData);

    if(!isNaN(finalValue)){
    //the final value is a number and can be compared to another number!
        alert("we have a number! you may proceed");
    }else {
    //stop right there mister!
        alert("You shall not pass!");
        event.preventDefault();//user input was blocked!
    }
    }); // this here marks the end of the onkeypress method,

    // and now getFinalValue(eventData) method below...
    function getFinalValue(eventData){
        let finalValue = eventData.fieldValue.substring(0,eventData.selectionStart) +
        eventData.input + eventData.fieldValue.substring(eventData.selectionEnd);

        return finalValue;
    }//end of the getFinalValue() method

---

你从哪里得到e.cancel语法的？我想取消活动，这就是为什么我粗略地选择了e.cancel。。我不知道你到底想做什么，但这闻起来像是一个糟糕的设计。与其过滤输入，不如尝试在提交时或在他们离开当前字段后进行验证。如果不清楚为什么会出现这种情况，过滤输入往往会造成糟糕的用户体验。如果您只想要1到12之间的数字，也许选择框会更方便。如果您真的想在这个阶段防止输入无效值，您还需要考虑复制和粘贴。无论如何，进行验证的正常方法是让用户输入任何内容，但一旦他想要提交，就会显示错误。@ShitalKadam使用e.which代替keyCode。还需要检查是否为退格键：

$( "#txthour" ).keyup(function() {

    if($( "#txthour" ).val() > 12)
    {
        $( "#txthour" ).val("12");
    }
});

    $(document).keypress(function(event)
    {
    //this is just a container object for readability purposes
    let eventData = {
        element: null,
        userinput: "",
        fieldname: "",
        fieldValue: null,
        selectionStart: -1,
        selectionEnd: -1
    }

    eventData.fieldName = event.target.id;
    eventData.element = document.getElementById(eventData.fieldName);
    eventData.fieldValue = element.value; //holds the value before modification
    eventData.input = String.fromCharCode(event.keyCode); //what ever the user typed!
    eventData.selectionStart = event.target.selectionStart;//this records
    eventData.selectionEnd = event.target.selectionEnd;//the user selection if any

    let finalValue = getFinalValue(eventData);

    if(!isNaN(finalValue)){
    //the final value is a number and can be compared to another number!
        alert("we have a number! you may proceed");
    }else {
    //stop right there mister!
        alert("You shall not pass!");
        event.preventDefault();//user input was blocked!
    }
    }); // this here marks the end of the onkeypress method,

    // and now getFinalValue(eventData) method below...
    function getFinalValue(eventData){
        let finalValue = eventData.fieldValue.substring(0,eventData.selectionStart) +
        eventData.input + eventData.fieldValue.substring(eventData.selectionEnd);

        return finalValue;
    }//end of the getFinalValue() method