How to make input field to accept only numbers

Question

I have a input field which is of type number so that it can accept numbers only -I am using regex to restrict user to enter special characters -it is working fine on system,but on small device as in my mobile phone the keypad type is only number,but when i am clicking on - it is taking that which i don't want

What i have done

$('#test').on('keypress', function(event) {

  var regex = new RegExp("^[0-9]+$");
  var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
  if (!regex.test(key)) {
    event.preventDefault();
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<input type="number" class="form-control" id="test">

It is showing up like this on mobile

-i have tried regex to restrict it but not working on phone

Edit I am almost close, i am trying below code,but it is taking minus - first time when i press not the next time,like if i enter 55 then i press - it is not taking it but when i press - before any number it is taking

(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  };
}(jQuery));




$("#uintTextBox").inputFilter(function(value) {


  return ^\d + [.] ? \d + $.test(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="uintTextBox" type="tel">

first check if the right js is loaded while browsing in phone — brk, Mar 25 '19 at 11:10
https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229 — User863, Mar 25 '19 at 11:14
Try using this regex: `^[0-9]+([.][0-9]{1,2})?$`. It will only allow decimal numbers upto 2 precision. — Rahul Sharma, Mar 25 '19 at 11:51
@RahulSharma i don't have any issue with decimal precision, issue is it is taking `-` as input on mobiles — vivek singh, Mar 25 '19 at 11:53
@RahulSharma this one is taking `-` even on desktop also while using keyboard — vivek singh, Mar 25 '19 at 12:01
Or try using the TEL input type to restrict only numbers: `` — Rahul Sharma, Mar 25 '19 at 12:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190622/discussion-between-vivek-singh-and-rahul-sharma). — vivek singh, Mar 25 '19 at 12:10
@RahulSharma sir i have edited my post whenever you get some time please check — vivek singh, Mar 26 '19 at 05:35
@RahulSharma i am doing like this `return /^?\d*[.]?\d*$/.test(value);` but it says on console as error nothing to repeat — vivek singh, Mar 26 '19 at 05:43
@RahulSharma it says syntax error `SyntaxError: expected expression, got '^'` — vivek singh, Mar 26 '19 at 05:51
How are you trying to use your regex? Can you show me that code here? — Rahul Sharma, Mar 26 '19 at 05:52
@RahulSharma yup it worked thanx :),i was using wrong regex pattern,please upload an answer so that i can mark it correct — vivek singh, Mar 26 '19 at 06:06

score 1 · Accepted Answer · answered Mar 26 '19 at 06:11

1

Use this regular expression to not allow - character in the beginning with the <input type="tel">:

/^\d*[.]?\d*$/

Please see working fiddle: https://jsfiddle.net/uhkv65yj/

answered Mar 26 '19 at 06:11

Rahul Sharma

7,768
2
28
54

Deepak A · Answer 2 · 2019-03-26T05:56:08.783

0

 /* Function allows only numbers and decimal */
$(document).on('keypress','#test',function(eve) {
    if ((  eve.which != 45 ||eve.which != 46 || $(this).val().indexOf('.') != -1 ) 
         && ( eve.which <  48 || eve.which > 57 ) 
         || ( $(this).val().indexOf('.') == 0) 
       )
       {
            eve.preventDefault();
       }
 })

edited Mar 26 '19 at 05:56

answered Mar 25 '19 at 11:25

Deepak A

1,624
1
7
16

just try it.please post the result – Deepak A Mar 25 '19 at 11:29
it is taking `-` on mobile – vivek singh Mar 25 '19 at 11:31
nop, it is not taking commas but it is taking `-` like i have uploaded the image – vivek singh Mar 25 '19 at 11:32
refer https://stackoverflow.com/questions/18033088/javascript-function-need-allow-numbers-dot-and-comma – Deepak A Mar 25 '19 at 11:35
have you found anything – vivek singh Mar 25 '19 at 13:08
he i have edited my post please check once if you get some time – vivek singh Mar 26 '19 at 05:36
try to get the keycode for '-' and restrict it,it may be the solution – Deepak A Mar 26 '19 at 05:44
can't it be done by modifying my regex `return /^-?\d*[.]?\d*$/.test(value);` – vivek singh Mar 26 '19 at 05:46
the above code is working in fiddle. i have not tested it in mobile.i am not sure about the soln.sorry – Deepak A Mar 26 '19 at 05:48
it is taking - in desktop also – vivek singh Mar 26 '19 at 05:50
The Unicode value of - is 45 try this in if condition – Deepak A Mar 26 '19 at 05:50
can you help me modifying the new regex which i have edited – vivek singh Mar 26 '19 at 05:53

How to make input field to accept only numbers

2 Answers2