Czy istnieje sposób, aby zmusić klawiaturę numeryczną do pojawienia się na telefonie <input type="text">
? Właśnie zdałem sobie sprawę, że <input type="number">
w HTML5 dotyczy „liczb zmiennoprzecinkowych”, więc nie nadaje się do numerów kart kredytowych, kodów pocztowych itp.
Chcę emulować funkcjonalność klawiatury numerycznej <input type="number">
dla danych wejściowych, które przyjmują wartości numeryczne inne niż liczby zmiennoprzecinkowe. Czy jest może inny odpowiedni input
typ, który to robi?
Odpowiedzi:
Możesz to zrobić
<input type="text" pattern="\d*">
. Spowoduje to pojawienie się klawiatury numerycznej.Więcej informacji można znaleźć tutaj: Podręcznik programowania tekstu, sieci i edycji dla systemu iOS
źródło
\d*
to nie działa i[0-9]
jest wymagane. Zauważ, że to zadziała ztype='numeric'
. Jest to sugerowane na podstawie odnośników do dokumentów, do których prowadzą linki, dotyczące kodu pocztowego.Uważam, że od połowy 2015 roku jest to najlepsze rozwiązanie:
W ten sposób otrzymasz klawiaturę numeryczną w systemie Android i iOS:
Zapewnia również oczekiwane zachowanie pulpitu za pomocą przycisków strzałek w górę / w dół i przyjaznego dla klawiatury zwiększania klawiszy strzałek w górę / w dół:
Wypróbuj w tym fragmencie kodu:
Łącząc oba
type="number"
ipattern="[0-9]*
, otrzymujemy rozwiązanie, które działa wszędzie. I jest zgodny z przyszłym proponowanyminputmode
atrybutem HTML 5.1 .Uwaga: użycie wzorca spowoduje uruchomienie rodzimej weryfikacji formularza przeglądarki. Możesz to wyłączyć za pomocą
novalidate
atrybutu lub dostosować komunikat o błędzie do nieudanej weryfikacji, używająctitle
atrybutu.Jeśli potrzebujesz mieć możliwość wpisywania wiodących zer, przecinków lub liter - na przykład międzynarodowych kodów pocztowych - wypróbuj ten niewielki wariant .
Kredyty i dalsze czytanie:
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- klawiatura numeryczna/
źródło
type="number"
Spec mówi następujące atrybuty treści nie musi być określona i nie stosuje się do elementu ... inputmode<input type="text" inputmode="numeric">
i chce, aby przeglądarki mobilneinputmode
sprawdzały, czy pokazuje klawiaturę numeryczną czy pełną klawiaturę. Ponieważ nie obsługują przeglądarekinputmode
, nie jestem pewien, jak zostanie zaimplementowany w przeglądarkach stacjonarnych i mobilnych. Na przykład: czy przeglądarki komputerowe będą umożliwiały wpisywanie liter<input type="text" inputmode="numeric">
? Jeśli tak, to jest problem.<input type="number">
zapobiega temu, zezwalając tylko na liczby. Być może będziemy musieli poczekać, aż przeglądarki zaczną go implementować i wtedy możemy zaktualizować tę odpowiedź.type="number"
jest przyzwoita , ale może wyświetlać spinner, który nie ma większego sensu np. W przypadku numerów kart kredytowych.This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Zauważyłem, że przynajmniej w przypadku pól podobnych do „kodu dostępu” wykonanie czegoś podobnego
<input type="tel" />
kończy się tworzeniem najbardziej autentycznego pola zorientowanego na liczby i ma również tę zaletę, że nie ma autoformatowania . Na przykład w aplikacji mobilnej, którą ostatnio opracowałem dla Hilton, skończyło się na tym:... a mój klient był pod wielkim wrażeniem.
źródło
number
wymusza ścisłe reguły dotyczące liczby w wielu przeglądarkach. Jeśli użytkownik doda spację (lub przecinek), aby oddzielić tysiące, nie otrzymasz ŻADNEJ wartości z danych wejściowych. Tak, nawet w JavaScriptinput.value
będzie puste. Wprowadzanie typutel
nie jest ograniczone do określonego formatu, więc użytkownik może nadal wprowadzać cokolwiek, a walidacja jest oddzielnym procesem (do obsługi przez programistę).Użycie
type="email"
lubtype="url"
daje klawiaturę przynajmniej w niektórych telefonach, takich jak iPhone. W przypadku numerów telefonów możesz użyćtype="tel"
.źródło
Istnieje niebezpieczeństwo związane z użyciem
<input type="text" pattern="\d*">
do wywołania klawiatury numerycznej. W przeglądarkach Firefox i Chrome wyrażenie regularne zawarte we wzorcu powoduje, że przeglądarka sprawdza poprawność danych wejściowych tego wyrażenia. błędy wystąpią, jeśli nie pasuje do wzorca lub pozostanie puste. Uważaj na niezamierzone działania w innych przeglądarkach.źródło
novalidate
atrybutu do elementu zawierającegoform element
powinno rozwiązać problemy z automatyczną weryfikacją. Pamiętaj, aby samodzielnie przeprowadzić walidację.Dzięki Inputmode możesz dać wskazówkę przeglądarce.
źródło
Myślę, że
type="number"
jest najlepszy dla semantycznej strony internetowej. Jeśli chcesz tylko zmienić klawiaturę, możesz użyćtype="number"
lubtype="tel"
. W obu przypadkach iPhone nie ogranicza wprowadzania danych przez użytkownika. Użytkownik może nadal wpisywać (lub wklejać) dowolne znaki, które chce. Jedyną zmianą jest klawiatura wyświetlana użytkownikowi. Jeśli chcesz mieć jakieś ograniczenia poza tym, musisz użyć JavaScript.źródło
type="number"
jest dla float.type="text"
jest dla sznurka. To, czego naprawdę chcesz, to liczba całkowita. Myślę, że liczba zmiennoprzecinkowa jest bliższa liczbie całkowitej niż łańcuchowi. Co myślisz?01920
do1920
.Dla mnie najlepszym rozwiązaniem było:
Dla liczb całkowitych, co powoduje wyświetlenie padu 0-9 na Androidzie i iPhonie
Możesz również chcieć to zrobić, aby ukryć przędzarki w Firefox / Chrome / Safari, większość klientów uważa, że wyglądają brzydko
I dodaj novalidate = 'novalidate' do elementu formularza, jeśli wykonujesz niestandardową walidację
Na wypadek, gdybyś mimo wszystko chciał liczb zmiennoprzecinkowych, przejdź do dowolnej precyzji, dodając „”. na Androida
źródło
W 2018 roku:
działa zarówno na Androida, jak i iOS.
Testowałem na Androidzie (^ 4.2) i iOS (11.3)
źródło
Możesz spróbować tak:
Ale bądź ostrożny: jeśli twoje dane wejściowe zawierają coś innego niż liczba, nie zostaną przesłane na serwer.
źródło
Nie mogłem znaleźć typu, który działałby najlepiej dla mnie we wszystkich sytuacjach: potrzebowałem domyślnego wprowadzania numerycznego (na przykład wpis „7,5”), ale także czasami dopuszczał tekst (na przykład „pass”). Użytkownicy chcieli mieć klawiaturę numeryczną (na przykład wpis 7,5), ale od czasu do czasu wymagane było wpisywanie tekstu (na przykład „przepustka”).
Raczej dodałem pole wyboru do formularza i pozwoliłem użytkownikowi przełączać moje dane wejściowe (id = "inputSresult") między type = "number" i type = "text".
Następnie podłączyłem moduł obsługi kliknięć do pola wyboru, które przełącza typ między tekstem a liczbą w zależności od tego, czy zaznaczone jest powyższe pole wyboru:
To nam się udało.
źródło
da wprowadzenie tekstu za pomocą klawiatury numerycznej
źródło
Możesz użyć
inputmode
atrybutu html:Aby uzyskać więcej informacji, zapoznaj się z dokumentem MDN na temat trybu wprowadzania .
źródło
Spróbuj tego:
zobacz: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask
źródło