Telefon: klawiatura numeryczna do wprowadzania tekstu

178

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 inputtyp, który to robi?

Tami
źródło
Nadal nie ma dobrej odpowiedzi na kody pocztowe. Ponownie zadałem to pytanie specjalnie dla międzynarodowych kodów pocztowych tutaj: stackoverflow.com/questions/25425181/…
Ryan McGeary
Wymyśliłem hackerski sposób, aby to zrobić ... sort: stackoverflow.com/a/25599024/1922144
davidcondrey
Od połowy 2015 roku jest na to lepszy sposób: stackoverflow.com/a/31619311/806956
Aaron Gray

Odpowiedzi:

206

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

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Seth Stone
źródło
23
Jeśli potrzebujesz tylko klawiatury numerycznej, ale nie chcesz sprawdzać poprawności (na przykład w przeglądarce Chrome), możesz umieścić atrybut novalidate w formularzu. <form ... novalidate>
Brian
4
Odkryłem, że \d*to nie działa i [0-9]jest wymagane. Zauważ, że to zadziała z type='numeric'. Jest to sugerowane na podstawie odnośników do dokumentów, do których prowadzą linki, dotyczące kodu pocztowego.
Brett Ryan
11
Działa to tak długo, jak potrzebujesz TYLKO wartości liczbowych. Liczby zmiennoprzecinkowe, które wymagają znaku „.” (lub „,” dla niektórych regionów) nie można wprowadzić, ponieważ klawiatura nie zawiera tych znaków.
DrHall
2
Jeśli muszę użyć. (kropka), jak mogę tego używać? ten wzorzec pokazuje tylko [0-9]
15
<input type = "text" pattern = "\ d *"> nie działa na Androidzie? Testowałem na iOS i działałem pomyślnie, ale nie działałem na Androidzie. jak mogę to rozwiązać
kamal
158

Uważam, że od połowy 2015 roku jest to najlepsze rozwiązanie:

<input type="number" pattern="[0-9]*" inputmode="numeric">

W ten sposób otrzymasz klawiaturę numeryczną w systemie Android i iOS:

wprowadź opis obrazu tutaj

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ół:

wprowadź opis obrazu tutaj

Wypróbuj w tym fragmencie kodu:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Łącząc oba type="number"i pattern="[0-9]*, otrzymujemy rozwiązanie, które działa wszędzie. I jest zgodny z przyszłym proponowanym inputmodeatrybutem HTML 5.1 .

Uwaga: użycie wzorca spowoduje uruchomienie rodzimej weryfikacji formularza przeglądarki. Możesz to wyłączyć za pomocą novalidateatrybutu lub dostosować komunikat o błędzie do nieudanej weryfikacji, używając titleatrybutu.


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/

Aaron Gray
źródło
1
HTML5 type="number" Spec mówi następujące atrybuty treści nie musi być określona i nie stosuje się do elementu ... inputmode
TGR
2
@Tgr Ahh, dobry chwyt. Wygląda na to, że specyfikacja zachęca ludzi do używania <input type="text" inputmode="numeric">i chce, aby przeglądarki mobilne inputmodesprawdzały, czy pokazuje klawiaturę numeryczną czy pełną klawiaturę. Ponieważ nie obsługują przeglądarek inputmode, 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ź.
Aaron Gray
2
Obsługa type="number"jest przyzwoita , ale może wyświetlać spinner, który nie ma większego sensu np. W przypadku numerów kart kredytowych.
Tgr
2
Posiadanie type = "number" to utrapienie w dupie X (. Jeśli dane wejściowe są nieprawidłowe, nie będziesz w stanie uzyskać wartości wejścia w JS, nie możesz uzyskać pozycji kursora itp.
Nicu Surdu
2
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Michael Laffargue
61

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:

Wyświetlacz aplikacji internetowej iPhone'a ze znacznikiem wejściowym z typem TEL, który tworzy bardzo przyzwoitą klawiaturę numeryczną w przeciwieństwie do numeru typu, który jest autoformatowany i ma nieco mniej intuicyjną konfigurację wprowadzania

... a mój klient był pod wielkim wrażeniem.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Gabriel Ryan Nahmias
źródło
4
Problemem nie było dla mnie automatyczne formatowanie, ale walidacja. Wprowadzenie typu numberwymusza ś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 JavaScript input.valuebędzie puste. Wprowadzanie typu telnie 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ę).
Nux
Jak mogę używać liczb dziesiętnych na tej klawiaturze
Anto
11

Użycie type="email"lub type="url"daje klawiaturę przynajmniej w niektórych telefonach, takich jak iPhone. W przypadku numerów telefonów możesz użyć type="tel".

Niklas
źródło
9

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.

Mikrofon
źródło
6
Dodanie novalidateatrybutu do elementu zawierającego form elementpowinno rozwiązać problemy z automatyczną weryfikacją. Pamiętaj, aby samodzielnie przeprowadzić walidację.
Justus Romijn
7
<input type="text" inputmode="numeric">

Dzięki Inputmode możesz dać wskazówkę przeglądarce.

Ralf de Kleine
źródło
4

Myślę, że type="number"jest najlepszy dla semantycznej strony internetowej. Jeśli chcesz tylko zmienić klawiaturę, możesz użyć type="number"lub type="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.

Cat Chen
źródło
8
Problem polega na tym, że type = "number" ma dotyczyć tylko liczb zmiennoprzecinkowych - więc nie ma kart kredytowych, kodów pocztowych ani mnóstwa innych liczb, tylko ciągów. Miałem nadzieję, że istnieje zarówno semantyczny sposób kodowania, jak i poprawnego wyświetlania klawiatury. Myślę, że odpowiednim typem byłby typ wejścia = "tekst", ale wtedy wyświetlana jest niewłaściwa klawiatura. Gdybyś mógł wskazać mi jakiś javascript, aby to zrobić, rozwiązałoby to oba problemy.
Tami
2
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?
Cat Chen
6
Jedną rzeczą, na którą należy uważać w przypadku type = "number", jest to, że Chrome przynajmniej wymusi wprowadzenie liczby - co spowoduje uszkodzenie numerów kart kredytowych wprowadzonych ze spacjami (na przykład)
John Carter,
8
@therefromhere Będzie również włączyć zip jak kody 01920do 1920.
ceejayoz
będzie również bałaganić, jeśli użytkownik ma ustawiony inny język w swojej przeglądarce stackoverflow.com/questions/5345095/ ...
dalore
4

Dla mnie najlepszym rozwiązaniem było:

Dla liczb całkowitych, co powoduje wyświetlenie padu 0-9 na Androidzie i iPhonie

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

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

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

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

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
aqm
źródło
1

W 2018 roku:

<input type="number" pattern="\d*">

działa zarówno na Androida, jak i iOS.

Testowałem na Androidzie (^ 4.2) i iOS (11.3)

Shalika Akalanka
źródło
0

Możesz spróbować tak:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Ale bądź ostrożny: jeśli twoje dane wejściowe zawierają coś innego niż liczba, nie zostaną przesłane na serwer.

alexwenzel
źródło
0

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".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

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:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

To nam się udało.

Jeff Mergler
źródło
0
 <input type="text" inputmode="decimal">

da wprowadzenie tekstu za pomocą klawiatury numerycznej

Chamin Thilakarathne
źródło