How to avoid Decimal values in input type number

Question

How to avoid Decimal values from input of Number in HTML5. Currently it allows user to type decimal value.

Answer 1

An alternative to the supplied answers is to monitor the keypress while in the input. I personally like leaving the type="number" as an attribute. Here's a JSFiddle

<form action="#" method="post">
  Numbers: <input name="num" 
                  type="number"
                  min="1"
                  step="1"
                  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                  title="Numbers only">
  <input type="submit">
</form>

Answer 2

I ended up checking to see if a user types in a period then preventing the event from propagating.

Edit: A better approach. The key press event has been deprecated. Also added in a regex to strip out everything but numbers [0-9] on paste.

<input type="number" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">

Caution Experimental. Only partially works on chrome: Wanted to look at a great way to grab the pasted value strip everything out then have it placed in input as normal. With the above method you are relying on the event order to correct the input, then any event listeners will ideally fire after. The onpaste method will fire before the input event fires so you keep the flow of events correct. However when replacing the string with only numbers the decimal point would still sneak in. Looking to update this when I find a better solution.

<input type="number" onkeydown="if(event.key==='.'){event.preventDefault();}" onpaste="let pasteData = event.clipboardData.getData('text'); if(pasteData){pasteData.replace(/[^0-9]*/g,'');} " >

Answer 3

Use pattern attribute

<input type="number" name="num" pattern="[0-9]" title="Numbers only">

For more details http://www.w3schools.com/tags/att_input_pattern.asp

FIDDLE

Answer 4

Just plain example using parseInt()

<input type="number" oninput="this.value=(parseInt(this.value)||0)" placeholder="0-9" autofocus='' value='0' />

Answer 5

Based on other answers here, I tried this:

<input id="storeId" min="0" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" title="Must be an integer number" type="number" >

I just blocked input of dot, but again this does not block paste.

ASCII DOT . character is 46

Answer 6

<input type="number" onkeydown="return event.keyCode !== 190"> 

This will Restrict period(.) input.For any Key restriction: https://css-tricks.com/snippets/javascript/javascript-keycodes/

Answer 7

You guys can try this This function does not allow user to paste unwanted characters and also disallow user to enter .+-E

var inputBox = document.getElementById("inputBox");
            
                var invalidChars = [
                    "-",
                    "+",
                    "e",
                    "."
                ];

                inputBox.addEventListener("input", function() {
                    this.value = this.value.replace(/[e\+\-\.]/gi, "");
                });
                

                inputBox.addEventListener("keydown", function(e) {
                    if (invalidChars.includes(e.key)) {
                        e.preventDefault();
                    }
                });
 
         

<input type="number" id="inputBox" >

`

If error occured in your JS. You can add this `$(document).ready(function() { code });

Answer 8

Try this :

<input type="number"  value=""  min="0" oninput="this.value=(parseInt(this.value)||0)" onkeypress="return !(event.charCode == 45||event.charCode == 46||event.charCode == 43)"  class="form-control" step="any" />

Answer 9

<input type="number" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  name="quantity">

Answer 10

event.key and event.charCode are deprecated features and don't work well with mobile virtual keyboards. I've done some research and this seems to be the easiest way to make it work.
Tested in Chrome and Firefox on Windows, in Chrome on Android and in Safari on iOS and seems to be working perfectly.

document.getElementById("myInput").addEventListener('beforeinput', e => {
  if (!(Number(e.data) >= 0 && Number(e.data) <= 9)) {
    e.preventDefault();
  }
});

/* unnecessary */
#myInput {
width: 24ch;
}

<input type="number" inputmode="numeric" placeholder="only a number can go here" id="myInput">

By the way, this is my first post here, so please tell me if I'm doing anything wrong.

Answer 11

You should post what you have tried when asking questions.

To use integers only, change the following attribute.

step="any"

to

step="1"

Answer 12

A simple regex can help sort with this issue .

var re = new regExp('[.]+) ;
if(!re.test(num)){listOfNumbers.push(num)};

not letting the user type in a '.' on the input might not be a viable option when you are dealing with multiple cultures and interpretations of '.'.

Answer 13

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode==46))
        return false;
    return true;     
}

Answer 14

In case anyone still wondering a solution, here's a workaround I came up with:

const val = 33.15;

console.log(String(val).includes(".")) // true

if(String(val).includes(".")){
   // the number is decimal
} else {
  // the number is not decimal
}

Answer 15

This solution let user insert only numbers from 0 to 9

<input type="number" name="intero" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />

Answer 16

 For Angular Developers:
    
    <input type="number" min="1" (keydown)="keyDown($event)">
    
    keyDown(event) {
        if (event.key === '.' || 'e' || 'E') {
          event.preventDefault();
        }
      } 

Answer 17

@Html.TextBoxFor(model => model.num, new { @class = "form-control input-sm",@maxlength = 5 ,@oninput = "this.value = this.value.replace(/[^0-9]/g, '');"})

In MVC, above solution works.