Если вы разрабатываете веб-страницу, на которой требуется вводить числовые значения, такие как номера кредитных карт, почтовые индексы, телефонные номера и т.д., вы скорее всего используете элемент input type="number". Однако этот элемент имеет некоторые недостатки, которые могут повлиять на пользовательский опыт и проверку данных. В этом посте я расскажу, почему вы должны избегать использования input type="number" для критических числовых полей и какие есть альтернативы.
Проблема с input type=“number”
Элемент input type="number" предназначен для ввода только числовых значений. Он также предоставляет элемент управления спиннером, который позволяет пользователям увеличивать или уменьшать значение, нажимая на стрелки вверх и вниз или используя прокрутку мыши или клавиши клавиатуры. Это может показаться удобным, но это также может вызвать некоторые проблемы.
Во-первых, элемент управления спиннером может быть раздражающим и ненужным для некоторых полей, таких как номера кредитных карт или почтовые индексы. Пользователи обычно предпочитают вводить эти значения, а не нажимать на стрелки. Кроме того, элемент управления спиннером может занимать некоторое место и заставлять поле ввода выглядеть меньше или неровно.
Во-вторых, элемент управления спиннером может вносить ошибки и несоответствия в данные. Пользователи могут случайно изменить значение, прокручивая мышь или нажимая клавиши клавиатуры. Например, если пользователь вводит номер кредитной карты, а затем прокручивает мышь, последняя цифра номера может измениться без его ведома. Это может привести к недействительным или неправильным данным, отправленным на сервер.
В-третьих, элемент input type="number" не предоставляет никакой проверки формата или длины числовых значений. Например, номер кредитной карты должен состоять из 16 цифр, но элемент input type="number" примет любое количество цифр. Аналогично, почтовый индекс должен иметь определенный формат в зависимости от страны, но элемент input type="number" не проверит это. Это может привести к недействительным или неполным данным, отправленным на сервер.
Решение: inputmode с pattern
Лучшей альтернативой использования input type="number" для критических числовых полей является использование атрибута inputmode с атрибутом pattern. Атрибут inputmode указывает, какой режим ввода использовать для поля ввода, например, числовой, текстовый, электронный и т.д. Атрибут pattern указывает регулярное выражение, которому должно соответствовать значение ввода.
Используя атрибут inputmode со значением numeric, вы можете подсказать браузеру, чтобы он показывал числовую виртуальную клавиатуру на мобильных устройствах, что может улучшить пользовательский опыт и уменьшить ошибки при вводе. Используя атрибут pattern, вы можете проверять формат и длину значения ввода, что может предотвратить отправку недействительных или неполных данных.
Вот пример того, как использовать атрибут inputmode с атрибутом pattern для поля ввода почтового индекса:
Это поле ввода будет показывать числовую виртуальную клавиатуру на мобильных устройствах.
Подписывайся на канал, тебя ждет еще больше интересных заметок для Frontend разработчика.