admin管理员组

文章数量:1289540

I have an HTML textbox as:

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

I want user to stop if they enter a number greater than 12.

When the user has entered 1, I don't want to them to enter the number 3, this will prevent the number being 13 (which is greater than 12).

I am dong this in Javascript as:

function isNumberKey(e) {

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

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

            e.cancel;
        }

        }

But it's not cancelling the text if it enters 13.

I have an HTML textbox as:

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

I want user to stop if they enter a number greater than 12.

When the user has entered 1, I don't want to them to enter the number 3, this will prevent the number being 13 (which is greater than 12).

I am dong this in Javascript as:

function isNumberKey(e) {

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

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

            e.cancel;
        }

        }

But it's not cancelling the text if it enters 13.

• javascript
• jquery

Share Improve this question Follow edited Jul 31, 2014 at 13:37 Joe 7,31111 gold badge3030 silver badges3434 bronze badges asked Jul 31, 2014 at 13:15 Shital KadamShital Kadam 23833 gold badges55 silver badges1414 bronze badges 11

• 2 Where did you get e.cancel syntax from? – Evan Knowles Commented Jul 31, 2014 at 13:17
• I want to cancel the event thats why i roughly taken e.cancel – Shital Kadam Commented Jul 31, 2014 at 13:18
• 1 btw.. i don't know what you exactly want to do, but it smells like a bad design.. – Kr15 Commented Jul 31, 2014 at 13:27
• 2 Instead of filtering input, try to validate at the point of submission or after they move away from the current field. Filtering input tends to create bad user-experiences if it's not obvious as to why it's happening. – Matthew Commented Jul 31, 2014 at 13:34
• 2 If you only want numbers from 1 to 12, maybe a selectbox would be more convenient. And if you really want to prevent entering invalid values at this stage, you also need to think about copy&paste. Anyway, the "normal" way of doing validation would be to let the user enter anything, but show an error once he wants to submit. – basilikum Commented Jul 31, 2014 at 13:34

 |  Show 6 more ments

5 Answers 5

Sorted by: Reset to default 7

Your first problem with your code is that you are binding it on keypress. That means $("#txthour").val() will not be updated before your event.

You need to know which character the user has pressed. There is a function for that: String.fromCharCode();.

To get the current character, you can use this:

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

then you need to check if it is a number:

if(!isNaN(currentChar))

Then you need to concatenate that character to your input:

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

Parse the new value and check if it's less than or equal to 12. If all of these condition matches, return true.

Final code :

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/6X9Yq/

---

Edit

To allow the press of the enter key, you need to check if the keycode is 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;
}

Try this instead:

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

The reason your original code doesn't work is because when the keydown event is called, the value of the text box hasn't been set yet. The code above figures out what the value will be based on your keystroke, and then checks to see if the future value will be > 12. If so, then the preventDefault() call cancels your input.

jQuery solution that:

1) Checks to make sure the user only inputs numbers.

2) Makes sure the number entered is 12 or lower.

3) Alerts the user based on the criteria they're not meeting, and clears the input field.

4) Also accounts for a user pasting something into the field.

$('#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

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

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

http://jsfiddle/5tjdL/

The problem:

When the user types a value and you are listening to the onkeypress event, you want to be able to see what the resulting value would be so that you can pare that new value to some other value and then determine if you want to block that input via event.preventDefault() method.

Heres my solution:

1) calculate the "true" new value(now unlike most answers that were previously written that make a huge erroneous assumption "My user will only type a value at the very end of the input field"), I will take into consideration the fact that a user can actually select existing input and overwrite it...ie [before key press] inputField = "12345", user selects "12345" and presses the key for "5", so that would mean that the new value is "5", or if the user selected "234" and pressed the key for "5", the resulting value would be "155".

2) once you have the final "true" value, you can now use the isNaN() method to test if the final value is a valid number or you could just pass the final value to your own method to make whatever parison you need and decide stop the event by calling event.preventDefault() method. here's a sample code for achieving that.

    $(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 pared 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

本文标签： javascriptDon39t allow the user to enter numbers greater than 12Stack Overflow