3

Ok Well. I want to restrict input field to accept only numbers with maxlength 5 characters.

My Try:

HTML

 <input type="number" maxlength="5" onKeyDown="numbersOnly(event);/>
 <input type="text" pattern= "[0-9]" onKeyDown="numbersOnly(event);/>

Javascript

   function numbersOnly(event,length) 
   {  
    return event.ctrlKey || event.altKey 
    || (95<event.keyCode && event.keyCode<106)
    || (event.keyCode==8) || (event.keyCode==9) 
    || (event.keyCode>34 && event.keyCode<40) 
    || (event.keyCode==46)
    || (event.keyCode>47)&&(event.keyCode<=57) ;
   }

All works in firefox. But when i check with safari ipad, it accepts special characters like ()@!#$&. I used alert function for debugging. It returns same keyCode for @ and 2 , 3 and # and so on. I tried keyUp,keyPress events and event.charCode,event.which,event.key. Nothing works

So how to differentiate it and i need support for backspace , enter , delete, arrow keys also.

2
  • numbersOnly is javascript function and not jquery, and can you tell us where you are calling this function? Jul 23, 2014 at 10:54
  • See the answers to this similar question: stackoverflow.com/questions/37390665/… - you could write e. g. <input type="text" data-filter="[0-9]{0,5}">
    – le_m
    May 26, 2016 at 20:30

4 Answers 4

4

I've made this once and haven't been able to break it. Tested on iPad.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

This also accounts for copy/paste and drag and drop text, which people often forget. You can add the max-length to the onchange.

5
  • 1
    Yes, backspace and such don't fire keypress events. You can always add keys there if you need certain special chars though.
    – Jonathan
    Jul 23, 2014 at 11:04
  • And that doesn't get removed in the onchange? this.value.replace(/[^0-9]+/g, ''); Can you explain how you break it, since I haven't been able to.
    – Jonathan
    Jul 23, 2014 at 11:21
  • return event.ctrlKey || event.altKey || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) || (event.which >47)&&(event.which <=57) ; This is what i added in my function
    – Gibbs
    Jul 23, 2014 at 11:24
  • The above code i pasted is the modification of yours. I added which to only numbers
    – Gibbs
    Jul 23, 2014 at 11:27
  • 1
    Minor bug: pasting text containing +,- or e causes your input to be cleared to 0. Also, an empty input accepts pasting +,- or e into it.
    – le_m
    May 26, 2016 at 20:39
1

Using type="number" on an input prevents you from reading non-numerical input values via input.value (it will then return an empty string) and thus eliminates the possibility of filtering invalid user input (+-.e) while keeping the valid numbers. Thus you have to use type="text". Example:

$('.input-number').on('input', function (event) {
    this.value = this.value.replace(/[^0-9]/g, '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="input-number" type="text" maxlength="5">

If you want the text-cursor not to move when pasting or typing invalid input, have a look at my answer to a similar question here: HTML input that takes only numbers and the + symbol

1
  • hey @le_m, thanks for the answer :), couple of quick Q's, 1) I didn't understand the type="number" explanation - could you please elaborate a bit, 2) I could not see this behavior "If you want the text-cursor not to move when pasting or typing invalid input", could you please tell how to reproduce the issue - so can check the other solution - but as this is working super fine I'm thinking why not use your answer :) --- Thank you
    – KcH
    Jul 8, 2022 at 14:21
0

Be careful the iOS keyCodes are not the same desktop computers. See IOS keyCodes in Javascript

<input type="number" maxlength="5" onkeypress="numbersOnly(event);/>

 var numbersOnly = function(event) {
        if(event.keyCode >= 48 && event.keyCode <= 57) {
            return false;
        } else {
            event.preventDefault();
        }
    }
0

If you want to enter the only numbers in input type number fields. this will be helpful, It will work on iPhone and iPad as well.

 $(document).on('keypress', 'input[type="number"]', function (event) {
    return event.code.includes('Digit') || event.code.includes('Numpad') ||  event.code.includes('Period');;
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.