Moderní tvorba webových aplikací

O webu

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

4 minuty

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).

Související články

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Stylování <input type=range>

Jak docílit vlastního vzhledu range „slideru“.

7 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025