Как задать maxlength для input с type number?

Question

[khipster]

Я знаю что maxlength не применим для input с type number. Атрибуты max и min не ограничивают длину ввода, они влияют только на кнопки +-, которые браузер сам вставляет в ячейки с type number. Велосипед на JS изобретать не хочу.

Answer 1

[Олег]

А что тут изобретать? Пару строк

Comments

[khipster]

От того что он маленький он не перестаёт быть велосипедом.

[Олег]

khipster: Тогда так

<input type="number" min="-999" max="12">
<input type="text" pattern="\d*" maxlength="12">

[khipster]

Олег: Говорю же min и max не влияют на длину ввода. Они только для кнопочек.

[Олег]

khipster: Если будет атрибут required у поля, то браузер не даст отправить форму. По другому никак или все же придется воспользоваться JS.

[khipster]

Олег: По-моему это косяк бараузеров. >:-(

Answer 2

[x038xx77]

я думаю это то что нужно:

<input type="number" onChange={e => {
                  let value = e.target.value
                  if (value.length > 12) value = value.slice(0, 12)}} />

P.S.максимальное число вводимых цифр-12
maxlength и max работают совершенно по разному, max ограничивает максимальное число цифры, но никак не число вводимых цифр, то есть maxlength для number не работает. Или так

<form method="post">
      <label for="myNumber">My Number:</label>
      <input type="number" maxlength="9" required
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" >
     <br><br>
      <input type="submit" value="Submit">
</form>