it-swarm-eu.dev

Jak reprezentovat číselný vstup, který je omezen na přírůstky určitého čísla

Mám požadavek na formulář, který omezuje hodnotu pole na pevné přírůstky 50 a nejsem si jistý, jaký by byl nejelegantnější způsob, jak toto omezení smysluplně reprezentovat.

Nejjednodušší řešení, které přijde na mysl, je metoda jQuery validate, kombinovaná s nějakou logikou na straně serveru, která je vázána na normální vstup do textového pole. Jiné alternativy, které přijdou na mysl, je výběr čísel nějakého druhu (nevím o jedné v současné době), která postupuje v nastavených přírůstcích nebo rozevíracím seznamu s pevným počtem hodnot.

Máte nějaké další nápady? Co by pro vás bylo nejintuitivnější?

14
Nathan Taylor

Navrhuji použít metodu implementovanou v Safari pro HTML5. Jak vidíte zde , existují nové typy vstupů v HTML5, které mají také nové atributy. V takovém případě byste použili typ vstupu čísla s atributem nazvaným "krok". Kód bude vypadat takto:

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

V tuto chvíli není mnoho prohlížečů, které s tím něco dělají. Pokud však tento kód zobrazíte v prohlížeči Safari (pomocí doctype HTML5), vidíte normální pole pro zadávání textu s ovládacím prvkem na straně, který poskytuje šipky nahoru/dolů, které zvyšují hodnotu uvnitř pole o hodnotu „krok“. jste přiřadili.

Pro prvek uživatelského rozhraní bych tedy replikoval, že u prohlížečů, které jej dosud nepodporují, šipka nahoru/dolů vedle vstupního pole. Chcete-li, aby uživatelé věděli, že očekáváte určitou hodnotu, stačí napsat: „zadejte násobek 50. ex: 0, 50, 100, 150 atd.“ Potom budete samozřejmě potřebovat kód na straně klienta nebo na straně serveru, abyste ověřili, že zadané číslo je v těchto rozsazích.

9
RussellUresti

Použijte jezdec. Většina knihoven uživatelského rozhraní nabízí posuvné ovládací prvky a obvykle vám dává možnost definovat „krok“, například 50, který omezuje výběr na libovolný násobek této hodnoty.

Pokud používáte HTML5, má vstupní značka typ „range“ (včetně atributu step), který by většina prohlížečů podporujících HTML5 měla podporovat: http://dev.w3.org/html5/markup/input. range.html

7
Rahul

Co je účel?

Kdyby to mělo vztah k účetnictví/matematice/číslům, navrhl bych multiplikátor. Zobrazí se tedy „x 50“ a zobrazí se součet. Pokud je to logická aplikace o 50, tak proč nepoužít pouze „50“?

4
Susan R

Myslím, že je nejlepší použít rozsahový posuvník, jak navrhli ostatní. Nebo můžete použít funkci Autocomplete do vstupního pole, které zobrazí návrh, když uživatel začne psát. Zde je příklad křížového prohlížeče pro obě tyto metody.

Posuvník: http://jqueryui.com/demos/slider/#range

Automatické doplňování: http://jqueryui.com/demos/autocomplete/

To opravdu záleží také na min & max hodnotách.

Použil jsem pouze seznam pravidelného výběru k zobrazení možných hodnot. A dalším řešením je jen ukázat součet jednoduchým způsobem, takže uživatel může zadat multiplikátor sám, ale stále vidět výsledek.

mockup

stáhnout zdroj bmml - Drátové snímky vytvořené pomocí Balsamiq Mockups

1
Nick P