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.

Gibbs
  • 21,904
  • 13
  • 74
  • 138
  • `numbersOnly` is javascript function and not jquery, and can you tell us where you are calling this function? – Bhushan Kawadkar Jul 23 '14 at 10:54
  • See the answers to this similar question: http://stackoverflow.com/questions/37390665/html-input-that-takes-only-numbers-and-the-symbol/37421357 - you could write e. g. `` – le_m May 26 '16 at 20:30

4 Answers4

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.

Jonathan
  • 8,771
  • 4
  • 41
  • 78
  • 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 '14 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 '14 at 11:21
  • `return event.ctrlKey || event.altKey || (9534 && event.keyCode<40) || (event.keyCode==46) || (event.which >47)&&(event.which <=57) ;` This is what i added in my function – Gibbs Jul 23 '14 at 11:24
  • The above code i pasted is the modification of yours. I added `which` to only numbers – Gibbs Jul 23 '14 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 '16 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

Community
  • 1
  • 1
le_m
  • 19,302
  • 9
  • 64
  • 74
  • 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 08 '22 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();
        }
    }
mintedsky
  • 1,073
  • 13
  • 18
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');;
});
pdas3a
  • 1
  • 3