Appearance
How to Allow Only Positive Numbers in the Input Number Type
Solutions with HTML attributes
As we know, the <input type="number"> specifies a field for entering a number. If you want to restrict the <input> field to only positive numbers, you can use the min attribute.
Example of allowing only positive numbers:
Example of allowing only positive numbers
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<input type="number" min="0" value="10" />
</body>
</html>Result
As you can see in the example above, using only the min attribute controls the spinner arrows, but you can still type a negative number.
<input min="0" type="number" value="10">
</input>To restrict the spinner arrows and prevent typing negative numbers, try the following.
Example of restricting the typing of negative numbers:
Example of restricting the typing of negative numbers
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');" />
</body>
</html>And here's the result:
<input min="0" name="test_name" oninput="validity.valid||(value='');" type="number">
</input>How does this work?
Here we used the oninput event to validate the input. It checks if the entered value meets the minimum requirement and clears it if it doesn't.
INFO
In JavaScript, events are executed when a specific action occurs, such as clicking or typing in an input field.
When the user enters a value, the browser checks validity.valid. If it is true, the value is kept. If it is false, the inline script sets the value to an empty string (value='').
A Problem!
You may have noticed that this approach still allows typing decimal numbers like 1.12. However, as soon as you type the period, the oninput handler triggers, validity.valid becomes false, and the value is cleared.
Try to type 1.23 or any number like that to see what we're talking about!
<input min="0" name="test_name" oninput="validity.valid||(value='');" type="number">
</input>We want clean positive integer numbers in our input! Here we go!
Let's update the code for a modern approach:
How to Allow Only Positive Numbers in the Input Number Type
html
<input type="number" min="0" oninput="this.value = this.value.replace(/[^0-9]/g, '')">The code above ensures that only numeric keys are accepted. We use the oninput event to check the input value after every change. The regular expression /[^0-9]/g finds any character that is not a digit from 0 to 9 and replaces it with an empty string.
We've switched to the oninput event this time.
INFO
The oninput event fires when the value of an input element is modified, whether by typing, pasting, or using the browser's autocomplete.
We restrict input to digits by checking the current value and stripping out any non-numeric characters. This modern approach is more reliable than the deprecated charCode method and also handles pasted content correctly.
<input min="0" oninput="this.value = this.value.replace(/[^0-9]/g, '')" type="number">
</input>Now you can be sure that your user can only type positive integer numbers in the input!