Atributele inputmode și enterkeyhint în HTML

<input inputmode="numeric" enterkeyhint="next">

Ce face Atributele inputmode și enterkeyhint

Atributul inputmode îi spune telefonului sau tabletei ce tastatură virtuală să afișeze: doar cifre (numeric), cifre cu separator zecimal (decimal), tastatură de telefon (tel), una cu @ pentru e-mail (email) și altele. Pe desktop nu are niciun efect.

Spre deosebire de type="number", inputmode nu schimbă validarea și nu adaugă săgeți de incrementare. De aceea este alegerea potrivită pentru coduri numerice care nu sunt cantități: cod poștal, CNP, cod PIN, cod primit prin SMS.

Atributul enterkeyhint schimbă eticheta sau pictograma tastei Enter de pe tastatura virtuală: next (Următorul), done (Gata), search (Caută), send (Trimite), go (Mergi). El schimbă doar aspectul tastei, nu și ce face Enter. Ambele atribute funcționează și pe elementele cu contenteditable.

Atribute

Atribut	Descriere
inputmode	none, text, decimal, numeric, tel, search, email, url.
enterkeyhint	enter, done, go, next, previous, search, send.

Exemple

Exemplul 1: Cod de confirmare primit prin SMS

Câmpul rămâne de tip text (păstrează zerourile de la început), dar telefonul afișează tastatura numerică. autocomplete="one-time-code" ajută telefonul să propună codul din SMS.

<label for="cod-sms">Codul primit prin SMS</label>
<input id="cod-sms" type="text" inputmode="numeric" pattern="[0-9]{6}"
       autocomplete="one-time-code" enterkeyhint="done">

Ce afișează browserul

Codul primit prin SMS [      ]
Pe telefon apare tastatura cu cifre de la 0 la 9, iar tasta Enter afișează „Gata”.

Exemplul 2: Prețul unui produs cu zecimale

inputmode="decimal" afișează cifrele împreună cu separatorul zecimal al limbii (virgulă sau punct).

<label for="pret">Preț (lei)</label>
<input id="pret" type="text" inputmode="decimal" enterkeyhint="next" value="49,90">
<label for="descriere">Descriere</label>
<input id="descriere" type="text" enterkeyhint="send">

Ce afișează browserul

Preț (lei) [49,90]
Descriere [          ]
Pe telefon, la câmpul de preț apare tastatura cu cifre și virgulă, iar Enter arată „Următorul”; la descriere, Enter arată „Trimite”.

Greșeli frecvente

• Folosirea type="number" pentru CNP sau cod poștal. Câmpul numeric poate elimina zerourile de la început și afișează săgeți inutile; folosește type="text" cu inputmode="numeric".
• Așteptarea ca inputmode să valideze datele. Utilizatorul poate lipi litere în câmp; pentru validare adaugă pattern sau verificare pe server.
• Folosirea enterkeyhint="next" fără să muți focusul la câmpul următor. Atributul schimbă doar eticheta tastei; comportamentul îl scrii tu în JavaScript, dacă e nevoie.

Comenzi înrudite

• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• Atributul contenteditable: Face conținutul unui element editabil direct în pagină, ca într-un editor de text; plaintext-only permite doar text fără formatare.
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <textarea>: Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.