WedX - журнал о программировании и компьютерных науках

Типы ввода HTML5 и сенсорные клавиатуры устройств: правильное использование номера, телефона и текста?

Я хотел бы автоматически активировать цифровую клавиатуру на сенсорных устройствах для полей ввода почтового индекса и номера социального страхования. Почтовые индексы вводятся в пятизначном формате, а SSN вводятся как 111-22-3333. Насколько я понимаю, поля type=number и type=tel автоматически инициируют соответствующую клавиатуру, поэтому эти входы кажутся подходящими, но я не уверен, что это правильный выбор.

Тип=Число

Первоначально я думал, что type=number будет оптимальным решением (поскольку это звучит семантически правильно), но с тех пор обнаружил, что этот тип на самом деле предназначен только для истинных чисел, а не для строк числовых символов. Я видел сообщения в блогах, в которых автоматически обвинялись браузеры, включая запятую в качестве разделителя тысяч и удаляя начальные нули при отправке (ни один из них не подходит для zip / ssn).

Type=Телефон

Из того, что я читал, это кажется лучшим решением моей проблемы. Однако меня беспокоит значение этого нового типа. Должен ли я действительно использовать поле телефона для почтового индекса и ssn? Что, если какой-нибудь производитель мобильных телефонов решит начать показывать адресную книгу для полей тел? Это не имело бы смысла для почтового индекса или ssn.

Альтернативы

Я обнаружил, что новый атрибут шаблона type=text inputs можно использовать для запуска цифровой клавиатуры на устройствах iOS, но это лишь частично решает проблему.

Я также обнаружил новый атрибут inputMode который кажется идеальным решением, но, похоже, еще не реализован ни одним браузером.

Вопрос

Я надеюсь, что у кого-то есть предложение или лучшая практика? Должен ли я использовать ТЕЛ? Должен ли я использовать решение для iOS и игнорировать другие устройства? Будет ли когда-нибудь работать inputMode?


Ответы:


1

Я предлагаю использовать только шаблон и режим ввода. Кроме того, Type = число приемлемо, если вы принимаете только целые числа от 0 до 999, и вы согласны с дополнительной проверкой, которая будет выполнена, даже если пользователь нажмет кнопку «Отмена».

У Type=Number есть проблемы, даже если это число, не говоря уже об SSN и т. д., поскольку он имеет непредсказуемую обработку значений в отношении отрицательных чисел, локализации, точности, начальных нулей и т. д., в зависимости от реализации браузера. Лучше всего избегать, если у вас нет внутреннего веб-сайта с фиксированной пользовательской базой, где вы знаете, какие устройства/языки используются, если только вы не ожидаете целое число от 0 до 999. Отрицательные числа, десятичные дроби и тысячи символов будут иметь проблемы на определенные устройства. Кроме того, если вы используете тип, страница будет проверять данные, даже если пользователь нажмет кнопку отмены. Вы можете глобально отключить проверку, но теперь страница будет автоматически удалять любые недействительные данные при обратной публикации! Если любой из них приемлем для вас, вы можете использовать «тип».

Type=Tel работает «сегодня», но, как вы заметили, использовать его опасно, поскольку кто знает, что браузеры будут делать в будущем. Не говоря уже о том, что «122-222-2223 Ext.34» даже не принимается этими устройствами. Я бы посоветовал проявлять осторожность, если это номер телефона, и избегать в противном случае. Может наступить день, когда какое-то устройство решит проверить число, даже если спецификации HTML5 запрещают это делать.

Pattern=... хорошо добавить. Большинство браузеров проигнорируют его, поэтому используйте еще один валидатор, но, по крайней мере, новые устройства iOS будут его использовать, а это 45% мобильных пользователей.

InputMode=... кажется единственной другой надеждой на данный момент. Надеюсь, в будущем его поддержат.

22.10.2014
Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


Для любых предложений по сайту: [email protected]