inputmode
Podpowiada, jaką klawiaturę ekranową pokazać: z cyframi, z przecinkiem, telefoniczną, do adresu e-mail albo żadną.
- Dotyczy
- Pola tekstowe
<input>,<textarea>i elementy zcontenteditable
Przykład
#<style>
.field { display: grid; gap: 4px; max-width: 300px; margin-bottom: 12px; }
.field small { color: #a3a3a3; }
</style>
<form>
<label class="field">Login lub e-mail
<input type="text" name="login" inputmode="email" autocomplete="username">
<small>Klawiatura ze znakiem @, bez sprawdzania formatu adresu.</small>
</label>
<label class="field">Kod z SMS-a
<input type="text" name="code" inputmode="numeric" autocomplete="one-time-code">
<small>Same cyfry.</small>
</label>
<label class="field">Kwota wpłaty w zł
<input type="text" name="amount" inputmode="decimal">
<small>Cyfry i separator dziesiętny, np. przecinek.</small>
</label>
</form>Rodzaj klawiatury zobaczysz tylko na telefonie lub tablecie. Na komputerze wszystkie trzy pola wyglądają i działają tak samo.
Definicja i zastosowanie
#Atrybut inputmode mówi telefonowi lub tabletowi, jaki rodzaj klawiatury ekranowej wysunąć, gdy użytkownik dotknie pola. Do kodu z SMS-a wystarczą same cyfry, do kwoty potrzebne są cyfry z przecinkiem, a do adresu e-mail klawiatura ze znakiem @. Dobrze dobrana klawiatura oszczędza przełączania i literówek.
W odróżnieniu od atrybutu type pola <input>, inputmode nie zmienia niczego poza klawiaturą: nie sprawdza poprawności, nie dodaje strzałek ani kalendarza i nie wpływa na to, co trafi na serwer. Dlatego pasuje do wartości, które składają się z cyfr, ale nie są liczbami do obliczeń, jak kody PIN, kody z SMS-a czy numery kart. Dla nich wybierz type="text" z inputmode="numeric", a nie type="number".
Pola type="email", type="tel" i type="url" same wybierają właściwą klawiaturę, więc inputmode przydaje się głównie w zwykłych polach tekstowych i w elementach z contenteditable. Na komputerze z fizyczną klawiaturą atrybut niczego nie zmienia.
Składnia
#<element inputmode="none | text | decimal | numeric | tel | search | email | url">…</element>Wartości
#none
Bez klawiatury ekranowej. Tylko wtedy, gdy strona ma własną klawiaturę, np. klawiaturę PIN w kiosku.text
Zwykła klawiatura tekstowa. Ustawienie domyślne.decimal
Cyfry i separator dziesiętny, przecinek lub kropka zależnie od ustawień języka. Do kwot i miar.numeric
Same cyfry. Do kodów PIN, kodów z SMS-a i numerów kart.tel
Klawiatura telefoniczna z cyframi oraz znakami+,*i#.search
Klawiatura do wyszukiwania. Klawisz Enter często zmienia się w „Szukaj”.email
Klawiatura ze znakiem @ i kropką. Nie sprawdza poprawności adresu.url
Klawiatura do adresów stron, zwykle z klawiszami/i..
Obsługa przeglądarek
#Szeroko dostępne · od 2021 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Łącz
inputmodezautocomplete. Parainputmode="numeric"iautocomplete="one-time-code"pozwala wpisać kod z SMS-a jednym dotknięciem podpowiedzi nad klawiaturą. - Klawiatura to tylko wygoda. Jeśli pole przyjmuje same cyfry, sprawdź to atrybutem
patternalbo w skrypcie, bo użytkownik może wkleić dowolny tekst.
Powiązane hasła
#- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- enterkeyhintZmienia napis lub ikonę klawisza Enter na klawiaturze ekranowej, np. na „Szukaj”, „Wyślij” albo „Dalej”.
- autocapitalizeMówi klawiaturze ekranowej, kiedy pisać wielką literą: nigdy, na początku zdania, na początku słowa albo zawsze.
- <textarea>Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.
- contenteditablePozwala użytkownikowi edytować treść elementu bezpośrednio na stronie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.