1

Сразу оговорюсь: данная тема поднималась тут, но ответ в ней не дан.

Делаю блок с вводом данных с пластиковой карты. Есть 4 input , в них должен быть ввод только цифр и не более 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>

Вот как это все отображается -В первом input вводятся только цифры и только 4 ( кстати англ. буква "e" почему-то тоже можно ввести).

-Во втором то же самое. Оно и понятно.

-В третьем случайно забрал одну двойную кавычку после type="number - и о чудо! Вводить можно не более 4х цифр ! Но теперь и буквы так же доступны для ввода, ясно почему, но не ясно почему maxlength="4" заработал!?

min/max тоже никак заставить работать ? Или я что-то делаю не так ?

2
  • 1
    maxlength для number не работает. Используйте text и валидируйте на корректный ввод. Commented 6 мар. 2019 в 13:43
  • Немного дополнил ответ.
    – Qwertiy
    Commented 7 мар. 2019 в 14:40

3 ответа 3

1
  1. Не надо использовать тип number для текстовых данных - лидирующие нули ввести не получится.

  2. Надо делать примерно так: https://ru.stackoverflow.com/a/687383/178988

  3. Только добавить валидацию, что вводятся только цифры.

  4. Ещё можно атрибут pattern="\d+" добавить - вроде бы на некоторых телефонах в таком случае отобразится цифровая клавиатура вместо стандартной.

1

дополню вот это:

кстати англ. буква "e" почему-то тоже можно ввести

это потому, что число (number) может быть не только целым и записано не только в десятичном счислении и не только в привычном нам виде. 0xFF, 3.5e4 - тоже числа (255 и 35000).

0

Как в комментарии к вопросу констатировал @Эникейщик maxlength для number не работает. или используйте type="text" или добавьте JS. Самый базовый пример:

<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"
 />

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.