Telefon: klawiatura numeryczna do wprowadzania tekstu

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?

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>

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:

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:

<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/

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.

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

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

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.

<input type="text" inputmode="numeric">

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

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.

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

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)

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.

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.

 <input type="text" inputmode="decimal">

da wprowadzenie tekstu za pomocą klawiatury numerycznej

Możesz użyć inputmodeatrybutu html:

<input type="text" inputmode="numeric" />

Aby uzyskać więcej informacji, zapoznaj się z dokumentem MDN na temat trybu wprowadzania .

Spróbuj tego:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

zobacz: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask