Immediately make a reservation: this topic was raised here, but the answer is not given.

I make a block with data entry from a plastic card. There are 4 input, they must be input only numbers and no more than 4.

<div class="card__input-num"> <input class="input card__input-num_item" type="number" min="1" max="4" autocomplete="off"> <input class="input card__input-num_item" type="number" autocomplete="off" maxlength="4" min="4" max="4"> <input class="input card__input-num_item" type="number autocomplete="off" maxlength="4"> <input class="input card__input-num_item" type="number" autocomplete="off" maxlength="4"> </div>

This is how it is displayed. -In the first input, only digits and only 4 are entered (by the way, the English letter "e" for some reason can also be entered).

-In the second the same. It is understandable.

- In the third one I accidentally took one double quote after type = "number - and about a miracle! You can enter no more than 4 digits! But now the letters are also available for input, it is clear why, but it is not clear why maxlength =" 4 "has earned!?

does min / max make it work too? Or am I doing something wrong?

  • one
    maxlength for number does not work. Use text and validate for correct input. - Enikeyschik
  • Slightly added to the answer. - Qwertiy ♦ pm

3 answers 3

  1. Do not use the number type for text data - leading zeros will not work.

  2. It is necessary to do something like this: https://ru.stackoverflow.com/a/687383/178988

  3. Just add a validation that only digits are entered.

  4. You can also add the attribute pattern="\d+" - it seems that on some phones, in this case, the numeric keypad will appear instead of the standard one.

    I will add this:

    by the way eng. the letter "e" for some reason, you can also enter

    this is because the number can be not only an integer and written not only in decimal notation and not only in our usual form. 0xFF, 3.5e4 are also numbers (255 and 35000).

      As stated in the commentary on the question @ Enikeyschik maxlength for number does not work. either use type="text" or add js. The most basic example:

       <input type="text" pattern="\d*" maxlength="4"> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type = "number" maxlength = "4" />