HTML input for Positive Whole Numbers Only (Type=number)

Question

I can\'t find the right regex pattern for this, even though there are a lot of questions in this kind.

I dont want the user to be able to type or input

Answer 1

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 2

To allow only number values you can use as follows:

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

Answer 3

I tried a lot of different solutions to achieve this, and I finally came up with this one, which does the job perfectly for us. It works for typing and for copy/paste, and I couldn't find any unwanted side-effects.

<form>
    <input
        type="number"
        min="0"
        step="1"
        onfocus="this.previousValue = this.value"
        onkeydown="this.previousValue = this.value"
        oninput="validity.valid || (value = this.previousValue)"
    />
</form>

It is like Nikhil Mahirrao's solution, but it will cause invalid keystrokes to be simply ignored without emptying the input.

Answer 4

Maybe this jQuery Codepen snipet will be helpful for someone. It's for type="number" (not "text"):

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

with [0-9] allowed inputs only. In the input will printed/pasted only numbers [0-9] with an min-max range (optional).

Some explanations: The code displays only numbers at the input stage, and does not reset the value to "" (empty) in case of inputting not valid number values like it does by default for type="number". And you can't use the attribute pattern="/^[0-9]*$/" for an 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 5

You can use this regex pattern for whole numbers [0-9]* or \d* [0-9] is range you can type 0 to 9 and * means not expecting any number or may you type infinite numbers

Answer 6

It is best to use following in input field, it will stop you to enter any other character except whole numbers.

Only whole number will be accepted.

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

See demo