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?
inputmode="number"Atrybut wydaje się poprawnej odpowiedzi pod koniec 2019 roku: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/... . Najwyższa głosowana odpowiedź w czasie tego komentarza sugeruje type="number", co wiąże się z pewnymi własnymi pułapkami; inputmodewydaje się wpływać tylko na wyświetlanie wirtualnej klawiatury, a nie na zachowanie / ograniczenia samego wejścia.
Odpowiedzi:
<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ę.
type="tel"jest gorsza do wpisywania liczb niż klawiatura dla type="number".
<input type="text" pattern="\d*" /> wyświetla również klawiaturę numeryczną, ale tylko w systemie iOS, a nie w systemie Android .
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
type="tel". Specyfikacja zauważa, że telnie numbernarzuca żadnej szczególnej składni, w przeciwieństwie do tego , który wymaga, aby jej wartość była prawidłową liczbą zmiennoprzecinkową .
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"
/>
decimali znalazłem ją tutaj developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
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">type="digits"opcję, żebyśmy nie musieli mieć tych hacków. Chodzi mi o to, że nie jest tak, że liczba wiodąca zera jest tak rzadka (kody pocztowe w USA są oczywistym przykładem).
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