Мобильный ввод строки цифр + пробелов (номер кредитной карты)
У меня есть форма ввода номера кредитной карты, которая будет использоваться как мобильными, так и не мобильными браузерами.
Я хочу намекнуть, что клавиатура должна появиться на мобильном телефоне и разрешить (необязательные) пробелы, поэтому либо "4111 1234 1234 1234" или "4111123412341234"; должно быть принято.
Из того, что я обнаружил, есть следующие варианты:
а)<input type="tel"/>
- это, кажется, ведет себя так, как я хочу (по крайней мере, с текущими мобильными браузерами), но это семантически неправильно.
б)<input type="text" pattern="[\d ]*"/>
или подобное -iPhone распознает некоторые паттерны ([0-9]*
, \d*
) как работа с клавиатурой, но это не работает на Android. Кроме того, я не уверен, что существуют какие-либо шаблоны, которые iPhone будет выдавать в виде цифр, чтобы разрешить пробелы, хотя у меня нет под рукой iPhone, чтобы проверить его прямо сейчас.
c) Попытаться обнаружить браузер с помощью Javascript и использовать (a) для мобильных устройств и (b) для немобильных. Глупо, и никакой реальной пользы по сравнению с (а).
<input type="number"/>
кажется не стартером, так какChrome по крайней мере заставит такой ввод в число, поэтому ломая ввод пробелами.
Есть ли лучший способ намекнуть мобильным браузерам, что они должны предлагать цифровую клавиатуру, чем использоватьtype="tel"
?
Edit:
Может быть-webkit-*
свойство, которое можно применить к обычному текстовому полю ввода, чтобы намекнуть, что цифровая клавиатура должна быть показана?