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

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

Я хочу намекнуть, что клавиатура должна появиться на мобильном телефоне и разрешить (необязательные) пробелы, поэтому либо "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-* свойство, которое можно применить к обычному текстовому полю ввода, чтобы намекнуть, что цифровая клавиатура должна быть показана?

Ответы на вопрос(2)

Ваш ответ на вопрос