Jak wymusić klawiaturę z numerami w witrynie mobilnej w systemie Android

Mam witrynę mobilną i zawiera ona inputelementy HTML , na przykład:

<input type="text" name="txtAccessoryCost" size="6" />

Osadziłem tę witrynę w WebViewcelu możliwego wykorzystania Androida 2.1, więc będzie to również aplikacja na Androida.

Czy można uzyskać klawiaturę z cyframi zamiast domyślnej z literami, gdy ten inputelement HTML jest aktywny?

A może można to ustawić dla całej aplikacji (może coś w pliku Manifest ), jeśli nie jest to możliwe dla elementu HTML?

<input type="number" />
<input type="tel" />

Oba przedstawiają klawiaturę numeryczną, gdy wejście staje się aktywne.

<input type="search" /> pokazuje normalną klawiaturę z dodatkowym przyciskiem wyszukiwania

Wszystko inne wydaje się wywoływać standardową klawiaturę.

WAŻNA UWAGA

Piszę to jako odpowiedź, a nie komentarz, ponieważ jest to dość ważna informacja i przyciągnie więcej uwagi w tym formacie.

Jak wskazywali inni kolesie, możesz zmusić urządzenie do pokazania ci klawiatury numerycznej z type="number"/ type="tel", ale muszę podkreślić, że musisz być bardzo ostrożny.

Jeśli ktoś spodziewa się liczby zaczynającej się od zer, na przykład 000222, prawdopodobnie będzie miał problem, ponieważ niektóre przeglądarki (na przykład Chrome na komputery stacjonarne) wyślą na serwer 222, co nie jest tym, czego chce.

O type="tel"czymś podobnym nie mogę powiedzieć, ale osobiście go nie używam, ponieważ jego zachowanie na różnych telefonach może się różnić. Ograniczyłem się do prostych, pattern="[0-9]*"które nie działają na Androidzie

To powinno działać. Ale mam te same problemy na telefonie z Androidem.

<input type="number" /> <input type="tel" />

Dowiedziałem się, że jeśli nie włączyłem frameworka jquerymobile, klawiatura wyświetlała się poprawnie na dwóch typach pól.

Ale nie znalazłem rozwiązania tego problemu, jeśli naprawdę potrzebujesz użyć jquerymobile.

UPDATE: Dowiedziałem się, że jeśli tag formularza jest przechowywany poza plikiem

<div data-role="page"> 

Klawiatura numeryczna nie jest wyświetlana. To musi być błąd ...

inputmodezgodnie ze specyfikacją WHATWG jest metodą domyślną.

W przypadku urządzeń z systemem iOS patternmoże również pomóc dodanie .

Aby zapewnić zgodność z poprzednimi wersjami, użyj ich typerównież, ponieważ Chrome używa ich od wersji 66.

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

Niektóre przeglądarki wysyłają zero początkowe do serwera, gdy typ wejściowy to „liczba”. Więc używam mieszania jquery i html, aby załadować klawiaturę numeryczną, a także upewniam się, że wartość jest wysyłana jako tekst, a nie jako liczba:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

input type = number

Jeśli chcesz wprowadzić liczbę, możesz użyć wartości atrybutu input type = "number" HTML5.

<input type="number" name="n" />

Oto klawiatura, która pojawia się na iPhonie 4:

Zrzut ekranu iPhone'a z numerem typu wejścia HTML5 Android 2.2 używa tej klawiatury dla type = number:

Zrzut ekranu Androida z numerem typu wejścia HTML5

Dodaj atrybut kroku do danych liczbowych

<input type="number" step="0.01">

Źródło: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html