修改

Question

我有一个HTML文本框：

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

我希望用户在输入大于12的数字时停止。

当用户输入1时，我不希望他们输入数字3，这将阻止数字变为13（大于12）。

我在Javascript中使用此作为：

function isNumberKey(e) {

        if (isNaN($("#txthour").val()))
        {
            alert("Enter only numbers");
        }

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

            e.cancel;
        }

        }

但如果它进入13，它就不会取消该文本。

Answer 1

您的代码的第一个问题是您在按键上绑定它。这意味着您的活动前$("#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;
}

http://jsfiddle.net/6X9Yq/

修改

要按下回车键，您需要检查键码是否为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;
}

Answer 2

请改为尝试：

            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事件时，文本框的值尚未设置。上面的代码根据您的击键计算出该值的大小，然后检查未来的值是否为＆gt; 12.如果是，则preventDefault（）调用取消您的输入。

Answer 3

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

<强> FIDDLE

Answer 4

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

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

http://jsfiddle.net/5tjdL/

Answer 5

问题：

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

这里是我的解决方案：

1）计算“真实的”新值（现在不同于以前编写的大多数答案，这些答案做出了巨大的错误假设：“我的用户只会在输入字段的最后键入一个值” ），我会考虑这样一个事实，即用户实际上可以选择现有输入并覆盖它...即[在按键之前] inputField =“ 12345”，用户选择“ 12345”并按“ 5”键，因此这意味着新值是“ 5”，或者如果用户选择“ 234”并按“ 5”键，则结果值将是“ 155”。

2）一旦有了最终的“ true”值，现在就可以使用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

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

5 个答案:

修改