Zvyšování hodnoty inputů

Má-li uživatel zadat na stránce nějaké číslo nebo čas, musí ho většinou napsat ručně. Existují různé postupy, jak zadávání zpříjemnit zjednodušením akcí pro snižování nebo zvyšování hodnoty.

„Nové“ formulářové prvky

Trochu si je možné pomoci rozšířenými typy značky <input>.

<input type=number>

Automaticky u něj podporované prohlížeče zobrazí tlačítka pro zvýšení/snížení o nastavený krok (atribut step).

<input type=time>

Téhož jde v některých prohlížečích docílit i při zadávání času.

Tlačítka +/−

Kvůli slabší a nejednoznačné podpoře nativních formulářových plus/mínus tlačítek si je můžeme vytvořit v JavaScriptu.

Taková funkce volaná při kliknutí myši (onclick) bude velmi prostá. Nejvíce kódu bude sloužit k převodu value na číslo a zaokrouhlování (ukázka).

Změna hodnoty kolečkem

Aby se návštěvník neuklikal k smrti, pomůže inkrementování/dekrementování pomocí točení kolečka.

Změna hodnot <inputu>u kolečkem bude ale nejspíš méně intuitivní než tlačítka.

Ukázka

Tlačítka plus/mínus se zrychlením

Vylepšit obyčejná tlačítka pro snižování nebo zvyšování hodnoty je možné akcelerací. Při stisknutém tlačítku (onmousedown) se bude hodnota stále upravovat a čím déle bude tlačítko stisknuté, tím to bude rychlejší (docílí se toho časovačem). Ukázka (sloučená varianta i s kolečkem).