Zvyšování hodnoty inputů
Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.
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.
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).
Co si myslíte o tomto článku?
Diskuse
Související články
Jak udělat input s automatickou šířkou podle obsahu
Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.
HTTP metody GET a POST
Kdy použít metodu GET a kdy POST. Rozdíly mezi metodami, datové limity a doporučení pro správné použití.
Jak neotravovat uživatele validací formulářů
Kdy zobrazovat chyby, kdy ne, a jak pomoci uživatelům místo jejich trestání.
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ářů.