Мобильный ввод строки цифр + пробелов (номер кредитной карты)

У меня есть форма ввода номера кредитной карты, которая будет использоваться как мобильными, так и немобильными браузерами.

Я хочу намекнуть, что клавиатура должна появиться на мобильном телефоне и разрешить (необязательные) пробелы, поэтому необходимо принять "4111 1234 1234 1234" или "4111123412341234".

Из того, что я нашел, варианты:

a) <input type="tel"/> - это похоже на то, что я хочу (с текущими мобильными браузерами, по крайней мере), но это семантически неправильно.

b) <input type="text" pattern="[\d ]*"/> или аналогичный - iPhone распознает некоторые шаблоны ([0-9]*, \d*) как работающие с клавиатурой, но это не работать на Android. Кроме того, я не уверен, что есть какие-то шаблоны, которые iPhone предоставит numpad для того, чтобы разрешить пробелы, хотя у меня нет iPhone под рукой, чтобы проверить прямо сейчас.

c) Попытка обнаружения браузера с помощью Javascript и использование (a) для мобильных устройств и (b) для немобильных. Cludgy, и никакой реальной выгоды от (a).

<input type="number"/> кажется не стартером, так как Chrome, по крайней мере, будет принудительно вводить такой номер в число, поэтому прерывая ввод с пробелами.

Есть ли лучший способ намекнуть на мобильные браузеры, что они должны предлагать numpad, чем использовать type="tel"?

Изменить:

Может быть, свойство -webkit-*, которое может быть применено к нормальному текстовому полю ввода, чтобы намекнуть, что нужно отобразить numpad?

Ответ 1

Семантически правильная разметка для текстового поля, которое все еще может содержать пробелы и другие специальные символы, <input type="text" inputmode="numeric"/>, насколько мне известно, а inputmode рекомендуется WhatWG он пока не поддерживается ни одним браузером. Его цель - представить пользователю цифровую клавиатуру на устройстве, которое имеет его, но все же ведет себя как текстовый ввод.

Мое предложение состояло бы в polyfill inputmode с JS и изменилось бы на type="tel" на сенсорных устройствах (что является лучшим решением в настоящее время). Помните, что по-разному устройства имеют очень разные клавиатуры "tel" и "number", iOS "tel" не допускает пробелов, в то время как Chrome mobile позволяет использовать всевозможные специальные символы. Кто знает, какие пользовательские клавиатуры Android делают?

Если вы не хотите создавать свой собственный polyfill, вы можете реализовать Webshim, который теперь полиполняет inputmode как из версия 1.14.0. Это также имеет приятную функцию для сохранения клавиатуры iOS 'number', вызванной установкой pattern="[0-9]*", если вы этого хотите (обратите внимание: это не та же клавиатура, которую вы получаете при настройке type="number"!)

Вот анализ, который я сделал на поведение типа ввода в браузерах и обсуждение с @aFarkas (автор Webshim) на полифонии входного режима.

Ответ 2

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

Если вы предложите отдельные поля ввода для четырех блоков чисел и используйте некоторый javascript для автоматического перемещения по курсору из одного поля ввода в другое после того, как будет введено четвертое число, вы можете использовать <input type="number"/> плюс вы резервные пользователи iPhone от переключения между раскладками клавиатуры.