Przyjazne dla urządzeń mobilnych wprowadzanie ciągu cyfr i spacji (numeru karty kredytowej)

Question

Mam formularz wprowadzania numeru karty kredytowej, który będzie używany zarówno przez przeglądarki mobilne, jak i inne.

Chcę wskazać, że klawiatura powinna pojawiać się na urządzeniu mobilnym i zezwalać na (opcjonalne) spacje, dlatego należy zaakceptować "4111 1234 1234 1234" lub "4111123412341234".

Z tego co znalazłem, opcje są:

a) <input type="tel"/> - to wydaje się zachowywać jak chcę (z obecnych przeglądarek mobilnych przynajmniej), ale semantycznie niewłaściwy.

b) <input type="text" pattern="[\d ]*"/> lub podobnie - iPhone recognises some patterns ([0-9]*, \d*), jak pracować z klawiatury, ale to nie działa tak dobrze na Androida. Nie jestem też pewna, czy istnieją jakieś wzorce, które iPhone da numpadowi dla tych dozwolonych przestrzeni, ale nie mam iPhone'a na rękę, by sprawdzić teraz.

c) Próba wykrycia przeglądarki przy użyciu Javascript i użycia (a) w przypadku urządzeń mobilnych i (b) w przypadku urządzeń innych niż mobilne. Cludgy, i nie ma prawdziwej korzyści ponad (a).

<input type="number"/> wydaje się być nierozrusznikiem od Chrome at least will force such input to a number, w związku z czym przerywa wprowadzanie za pomocą spacji.

Czy istnieje lepszy sposób na podpowiedzi do przeglądarek mobilnych, które powinny oferować klawiaturę numeryczną niż przy użyciu type="tel"?

Edit:

Może nieruchomość -webkit-*, które mogą być stosowane do normalnego pola wprowadzania tekstu do zrozumienia, że ​​KN należy zamieścić?

Answer 1

Z tego, co wiem, nie ma układu klawiatury na iPhonie, który umożliwia zarówno liczby, jak i spacje, bez automatycznego przełączania między liczbami i znakami. Wpisanie numeru z odstępami będzie wymagało ponownego przełączenia użytkownika z powrotem na układ klawiatury liczb po każdym spacji.

Jeśli oferowałbyś pojedyncze pola wejściowe dla czterech bloków liczb i używałbyś trochę javascriptu do automatycznego przesuwania kursora z jednego pola wprowadzania danych do następnego po wpisaniu czwartej liczby, możesz użyć <input type="number"/> plus możesz zaoszczędzić Użytkownicy iPhone'a przełączają się między układami klawiatury.

Answer 2

semantycznie poprawne znaczniki dla pola tekstowego, które wciąż mogą zawierać spacji i innych znaków specjalnych jest <input type="text" inputmode="numeric"/> jednak o ile jestem świadomy podczas inputmode jest rekomendowana przez WhatWG nie jest jeszcze obsługiwany przez przeglądarki. Jego celem jest przedstawienie użytkownikowi klawiatury numerycznej na urządzeniu, które ją ma, ale nadal zachowuje się jak wejście tekstowe.

Moja sugestia to polyfill inputmode z JS i zmiana na type="tel" na urządzeniach dotykowych (co jest najlepszym obecnie dostępnym rozwiązaniem). Należy pamiętać, że różne urządzenia mają bardzo różne klawisze "tel" i "numeryczne", a telefon "iOS" nie pozwala na spacje, podczas gdy telefon komórkowy Chrome pozwala na korzystanie ze wszystkich znaków specjalnych. Kto wie, co robią niestandardowe klawiatury z systemem Android?

Jeśli nie chcesz budować własnego urządzenia wielofunkcyjnego, możesz wdrożyć Webshim, które teraz nazywa się inputmode od release 1.14.0.Ma to również ma miłą cechę utrzymywania „number” klawiaturę iOS wywoływane przez ustawienie pattern="[0-9]*" jeśli chcesz to (uwaga: to nie jest taka sama klawiatura pojawia się po ustawieniu type="number")

Oto analiza zrobiłem na input type behavior across browsers i mój debate z @aFarkas (autor Webshim) na polyfilling inputmode.