How to Allow Only Positive Numbers in the Input Number Type
In this snippet, we’ll demonstrate how to allow only positive numbers in the input number type. You can use the “min” attribute to specify restrictions.
Solutions with HTML attributes
As we know, the <kbd class="highlighted"> XFI3 </kbd> specifies a field for entering a number. If you want to restrict the <input> field to only positive numbers, you can use the <span class="attribute">min</span> attribute.
Example of allowing only positive numbers:
<!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 <span class="attribute">min</span> attribute controls the spinner arrows, but you can still type a negative number.
<div class="demo px-2.5 mt-1 mb-5 not-prose"> <input min="0" type="number" value="10"> </input> </div> To restrict the spinner arrows and prevent typing negative numbers, try the following.
Example of restricting the typing of negative numbers:
<!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:
<div class="demo px-2.5 mt-1 mb-5 not-prose"> <input min="0" name="test_name" oninput="validity.valid||(value='');" type="number"> </input> </div> ### How does this work?
Here we used the <span class="attribute">oninput</span> event to validate the input. It checks if the entered value meets the minimum requirement and clears it if it doesn't.
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!
<div class="demo px-2.5 mt-1 mb-5 not-prose"> <input min="0" name="test_name" oninput="validity.valid||(value='');" type="number"> </input> </div> 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
<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 <span class="attribute">oninput</span> 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 <span class="attribute">oninput</span> event this time.
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 <code>charCode</code> method and also handles pasted content correctly.
<div class="demo px-2.5 mt-1 mb-5 not-prose"> <input min="0" oninput="this.value = this.value.replace(/[^0-9]/g, '')" type="number"> </input> </div> Now you can be sure that your user can only type positive integer numbers in the input!