HTML input for positive integers (Type = number)

Question

I cannot find the correct regex pattern for this, although there are many questions in this.

I do not want the user to be able to enter or enter

<td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" /></td> 

• -1.0 (Negative values)
• String Values ​​and Any Character
• 1.0 (decimal values)
• No range limit

I want to accept only positive integers

TO SOLVE there is no need for regular expression, I did not know this: D

 <td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" onkeypress="return event.charCode >= 48 && event.charCode <= 57"</td> 

Answer 1

To type any input, but numeric, you can use

 <input type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="itemConsumption" /> ^------------.... 

 <form id="mfrm"> <table> <tr> <td>Enter number only: <input type="text" name="itemConsumption" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" /></td> <td><input type="Submit"/></td> </tr> </table> 

Here is the condition event.charCode == 8 || event.charCode == 0 || event.charCode == 13 event.charCode == 8 || event.charCode == 0 || event.charCode == 13 event.charCode == 8 || event.charCode == 0 || event.charCode == 13 handles the case of pressing the DELETE, BACKSPACE or ENTER keys (important for Firefox, see the Mohit comment below and the datashaman comment related to the inclusion of the ENTER key).

event.charCode >= 48 && event.charCode <= 57 means that only 0 (decimal code 48) and all other digits up to 9 will be returned (decimal code 57).

Answer 2

To allow only numeric values, you can use the following:

 <td><input type="number" pattern="\d+" name="itemConsumption" /></td> 

Answer 3

If it comes to HTML5, you can try the min attribute:

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

Answer 4

You can use type , min and oninput

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

 <form> <label>Input with positive numbers only</label><br/><br/> <input type="number" min="0" step="1" oninput="validity.valid||(value='');"> </form> 

Answer 5

You can use this regex pattern for integers [0-9] * or \ d * [0-9] - a range that you can enter from 0 to 9, and * means that you are not expecting any number or can enter infinite numbers

Answer 6

Maybe this piece of jQuery Codepen code will be useful for someone. This is for type = "number" (not "text"):

 <input class="js-input-absint" type="number" step="1" min="18" max="150" name="age" value="50"> 

only with [0-9] enabled inputs. At the input only numbers [0-9] with min-max range (optional) will be printed / inserted.

Some clarifications: the code displays only numbers at the input stage and does not reset the value to "" (empty) if invalid numerical values ​​are entered, as it happens by default for type = "number". And you cannot use the attribute pattern = "/ ^ [0-9] * $ /" for the input type = "number".

 var $inputAbsint = $('.js-input-absint'); if ($inputAbsint.length) { $(document).on('keypress', '.js-input-absint', function (event) { var allowed = /^[0-9]|Arrow(Left|Right)|Backspace|Home|End|Delete$/; return allowed.test(event.key); }).on('focusout paste', '.js-input-absint', function () { var $input = $(this); var defaultValue = this.defaultValue || $input.attr('min'); // Important(!): Timeout for the updated value setTimeout(function () { var current = $input.val(); var regexNumbers = new RegExp(/^[0-9]*$/, 'g'); var isNumbersOnly = regexNumbers.test(current); // Clear wrong value (not numbers) if ((current === '' || !isNumbersOnly) && defaultValue.length) { $input.val(defaultValue); current = defaultValue; } // Min/Max var min = parseInt($input.attr('min'), 10); var max = parseInt($input.attr('max'), 10); var currentInt = parseInt(current, 10); if (!isNaN(min) && !isNaN(currentInt) && currentInt < min) { $input.val(min); } if (!isNaN(max) && !isNaN(currentInt) && currentInt > max) { $input.val(max); } }, 100); }); } 

Answer 7

You cannot press the "-" button on the keyboard.

 <!--HTML Code is below--> <input type="text" name="value1" id="value1" class="form-control" required="required" onkeydown="keyCode(event)"> <!--JQuery Code is below--> <script> $(document).ready(function() { $value1.on("keyup", function keyCode(event){ var x = event.keyCode; if (x == 109 || x == 189) { event.preventDefault(); alert ("You can't enter minus value !"); } }); }); </script> 

109 is the numeric side of the keyboard. 189 is located above the character buttons.

Answer 8

You can try using this regex:

 ^(0|[1-9][0-9]*)$ 

or even just as Avinash said:

 ^\d+$ 

Answer 9

It is best to use the following in the input field, this will stop you from entering any character other than integers.

Only an integer will be accepted.

 onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" 

See demo