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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zapamatování formulářových polí

Automatické zapamatování formulářů

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

AJAX upload souborů

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Duplikování položek formuláře v JS

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

Textarea s automatickou výškou

Automatická výška <textarea>

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

Komentáře