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

Automatické načítání firemních údajů z registru ARES

Návod na získání dat o firmě z IČO nebo DIČ pomocí veřejné API a jejich použití pro předvyplnění webových formulářů.

8 minut

HTML značka <keygen>

K čemu sloužila HTML značka <keygen>.

7 minut

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

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