How to make type="number" to positive numbers only

HTML5 attributes for positive number inputs

Enforce positivity with min attribute

With the min HTML5 attribute, you can define the minimum value a <input type="number"> field can have. Make your input non-negative by setting min="0":

<input type="number" min="0">


Determine whether you need to keep zero in the game. If not, set min to "1":

<input type="number" min="1">


Dial in your increments with step attribute

When integers are the actors in your play, min="1" and step="1" provide a positive integer-only stage:

<input type="number" min="1" step="1">


// Who needs decimals anyway? 🎭

To welcome floating-point numbers, set min="0.01" and step="0.01". The smallest increment will be 0.01:

<input type="number" min="0.01" step="0.01">


// Welcome to the decimal-dance party 🕺💃

Real-time validation with oninput

The oninput HTML5 event watches for user input. For an ever-positive input field, pair it with validity.valid :

<input type="number" min="0" oninput="validity.valid||(value='');">


//Invalid entry? Not on my watch! ⌚️

Javascript's handiwork for positive numbers

Key press filter using onkeypress

You can filter non-digit characters by using the onkeypress event. Here's a quick way to ghost that negative sign and any other non-numeric nuisances:

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="number" onkeypress="return isNumberKey(event)">


//CharCode, I choose you! Iron handcuffs for non-digits, GO! 🚨

Swap negatives to positives using onkeyup

Use the onkeyup event to convert any rogue negative number into a model positive citizen. This snippet will reverse the negativity:

function ensurePositiveNumber(input) {
    if(input.value < 0) input.value = -input.value;
}
<input type="number" onkeyup="ensurePositiveNumber(this)">


// Negativity appears. Positivity, I choose you! 🦸‍♀️

Winning UX with type="number"

Preserving type="number" leverages browser validation and brings up the numeric keyboard on mobile. It's a small touch with a hefty UX payoff.

Tactical toolbox to constrain input

Trust in HTML's validation

HTML5's built-in validation powers, in alliance with the min attribute and oninput, easily ward off non-positive integers without an ounce of JavaScript.

The power of JavaScript for immediate feedback

For dynamic validation or swift visual user feedback, let JavaScript event handlers like onkeypress and onkeyup save the day. Perfect for form-filled web applications.

Prioritize the user experience

Concentrate on a setup that aligns with user experience objectives. On desktop, accurate control over increment steps might be key; on mobile, getting the numeric keypad to show up makes a world of difference.

Test, test and test

Thoroughly test edge cases, like pasted values or the plus and minus buttons' behavior. Cross-browser and cross-device testing is also vital, annoying as it may be.

// Because, you know, not all browsers were created equal...or logical. 😅