Ich habe ein Formular zur Eingabe von Kreditkartennummern, das sowohl von mobilen als auch von nicht mobilen Browsern verwendet wird.

Ich möchte darauf hinweisen, dass eine Tastatur auf Mobilgeräten angezeigt werden soll und dass (optionale) Leerzeichen zulässig sind. Daher sollte entweder "4111 1234 1234 1234" oder "4111123412341234" akzeptiert werden.

Nach dem, was ich gefunden habe, sind die Optionen:

ein)<input type="tel"/> - das scheint sich so zu verhalten, wie ich es will (zumindest mit aktuellen mobilen Browsern), aber es ist semantisch falsch.

b)<input type="text" pattern="[\d ]*"/> oder ähnlich - dieDas iPhone erkennt einige Muster ([0-9]*, \d*) wie das Arbeiten mit der Tastatur, aber dies funktioniert nicht so gut auf Android. Ich bin mir auch nicht sicher, ob es Muster gibt, die das iPhone mit einem Nummernblock kennzeichnet, der Leerzeichen zulässt, obwohl ich momentan kein iPhone zur Verfügung habe, um das zu überprüfen.

c) Versuchen Sie, den Browser mit Javascript zu erkennen, und verwenden Sie (a) für Mobilgeräte und (b) für Nicht-Mobilgeräte. Klobig und kein wirklicher Vorteil gegenüber (a).

<input type="number"/> scheint seitdem ein Nichtstarter zu seinZumindest Chrome wird eine solche Eingabe zu einer Zahl zwingenBrechen Sie daher die Eingabe mit Leerzeichen.

Gibt es eine bessere Möglichkeit, mobilen Browsern einen Hinweis darauf zu geben, dass sie ein Numpad anbieten sollten, als dies zu tun?type="tel"?

Bearbeiten:

Vielleicht ein-webkit-* Eigenschaft, die auf ein normales Texteingabefeld angewendet werden kann, um darauf hinzuweisen, dass ein Nummernblock angezeigt werden soll?