Tryb wpisywania <... inputmode>
W jaki sposób ustawić typ klawiatury na ekranie smartfona do wpisywania wartości liczbowej, numeru telefonu, adresu URL lub e-mail?
- Elementy bez znacznika zamykającego (np. INPUT):
<element inputmode="tryb">
- Elementy ze znacznikiem zamykającym (np. TEXTAREA):
<element inputmode="tryb">...</element>
- element
- Znaczniki:
- tryb
- Należy podać jedną z poniższych wartości:
- none - przeglądarka nie powinna w ogóle wyświetlać klawiatury ekranowej. Jest przydatne, jeśli na stronie wyświetlamy własną kontrolkę klawiatury.
- text - klawiatura ekranowa umożliwiająca wprowadzanie tekstu w lokalnym języku użytkownika.
- tel - klawiatura ekranowa umożliwiająca wprowadzanie numerów telefonów. Powinna zawierać klawisze dla cyfr od 0 do 9, znak "#" oraz znak "*". W niektórych lokalizacjach może również zawierać etykiety mnemoniczne liter (np. w USA klawisz oznaczony "2" jest historycznie oznaczony także literami A, B i C).
- url - klawiatura ekranowa umożliwiająca wprowadzanie tekstu w lokalnym języku użytkownika, z klawiszami ułatwiającymi wprowadzanie adresów URL, takimi jak "/" i "." oraz do szybkiego wprowadzania ciągów często występujących w nazwach domen, takich jak "www." czy ".com".
- email - klawiatura ekranowa umożliwiająca wprowadzanie tekstu w lokalnym języku użytkownika, z klawiszami ułatwiającymi wprowadzanie adresów e-mail, takimi jak znak "@" i znak ".".
- numeric - klawiatura ekranowa umożliwiająca wprowadzanie cyfr. To słowo kluczowe jest przydatne przy wprowadzaniu kodów PIN.
- decimal - klawiatura ekranowa umożliwiająca wprowadzanie ułamków dziesiętnych. Powinny być wyświetlane klawisze numeryczne i separator dziesiętny zgodny z lokalnym formatem.
- search - klawiatura ekranowa zoptymalizowana do wyszukiwania.
Urządzenia mobilne są wyposażone w klawiaturę ekranową, która potrafi dopasować zestaw klawiszy do typu wprowadzanej wartości. Na przykład przy wprowadzaniu wartości numerycznej, dostępne mogą być tylko cyfry, przecinek i minus. Możemy ręcznie wymusić określony tryb wprowadzania tekstu poprzez przypisanie atrybutu inputmode="...".
Warto zauważyć, że niektóre wartości atrybutu trybu wpisywania odpowiadają typom pól formularza:
inputmode="text"itype="text"inputmode="tel"itype="tel"inputmode="email"itype="email"inputmode="search"itype="search"
Różnica między nimi polega na tym, że wartość trybu wpisywania wskazuje jedynie, jakiego rodzaju klawiaturę ekranową powinno wyświetlić urządzenie mobilne, podczas gdy typ pola może nie tylko przełączyć odpowiednią klawiaturę ekranową, ale przede wszystkich wskazuje charakter wprowadzanych danych. Ponadto atrybut inputmode="..." ma zastosowanie nie tylko do znacznika INPUT, ale również TEXTAREA czy nawet dowolnego elementu edytowalnego, w którym można wpisać tekst. Można go również przypisać zbiorczo do wielu elementów INPUT, TEXTAREA lub edytowalnych - wystarczy je objąć dowolnym znacznikiem z przypisanym atrybutem inputmode="...".
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
inputmode | 66 2018-04-17 | 95 2021-12-07 | 79 2020-01-15 | 53 2018-05-10 | 12.1 2019-03-25 |