При использовании типизированного ввода для html-форм важно использовать правильный тип для правильной задачи. Одна вещь, которую я узнал, это то, что ввод числа не используется для того, что я думал. На первый взгляд это кажется простым: «текст» — это текст, «число» — это число… верно? Что ж, оказывается, вы должны подумать, как вам нужно оценивать этот ввод.

Числовой против последовательного

Ввод type=number на самом деле лучше всего подходит для подсчета или увеличения. Другими словами, он используется, когда релевантно значение числа. Примером этого может быть сравнение того, насколько большое число сравнивается с другим (равно 5 ‹ 10 ?). Имея это в виду, вы можете не захотеть использовать этот тип ввода при вводе ввода для кредита. номер карты или почтовый индекс. В таких случаях оценивается каждая отдельная цифра и порядок цифр. Почтовый индекс «12886» читается как «один, два, восемь, восемь, шесть», а не 12 886. По этой причине вы можете захотеть использовать текстовый ввод, даже если вы запрашиваете у пользователя число.

Ввод текста для чисел

Преимущества использования текстового ввода при вводе чисел включают в себя:

ограничение количества символов

Вы можете ограничить количество цифр, которые может ввести пользователь. Этого легко добиться с помощью атрибута maxlength. Ввод числа не имеет атрибута maxlength.

Нет стрелок увеличения

При текстовом вводе по умолчанию не используются инкрементальные стрелки, как в некоторых браузерах при вводе чисел. Например, нет причин добавлять 1 к вашему почтовому индексу.

Пробелы и специальные символы

Ввод текста позволяет использовать пробелы для организации ввода, например, с помощью кредитных карт. Или, может быть, вы хотите показать символ + или # по умолчанию. Вы можете столкнуться с ошибками при попытке ввода числа.

Следует также отметить, что javascript по умолчанию возвращает строку из текстового ввода, что предпочтительнее при сопоставлении чисел, а не при сравнении их значений. Числовой ввод вернет числовой тип, но при использовании некоторых методов DOM, таких как getElementById, он также вернет ваш номер в виде строки.

Вот и все! Я надеюсь, что это может помочь вам достичь ваших целей формы