Почетак » CodeIgniter » Polje za numerički unos u HTML5 (input type=number) i decimale u Chrom-u

Polje za numerički unos u HTML5 (input type=number) i decimale u Chrom-u

Danas sam se suočio sa ovim problemom i našao sam odlično objašnjenje na Isotoma Blog, pa ću ga stoga preneti ovde kako ga ne bih izgubio 🙂

Kao što znamo, HTML5 donosi pregršt novih polja za obrasce, među kojima je i numerički tip. Očekivano, on služi za unos numeričkih podataka, ali kada u Crome (Chromium) pokušamo uneti broj sa decimalama i poslati obrazac dolazi do greške i Chrom nam saopšrtava da uneta vrednost nije ispravna.


<input type="number" />

input_number1

Obzirom da se pomenuto ne dešava u Firefox-u, postavlja se pitanje da li je problem u Chromu. Međutim Chrom se samo ponaša u skladu sa definicijom W3C. Brojčana polja imaju dodatne atribute „min“ (minimalna vrednost) i „step“ (korak uvećanja/umanjenja), koja određuju opseg vrednosti koje se mogu unositi. Osobina „min“ je očigledna i predstavlja najmanju vrednost koju polje može imati, dok je osobina „step“ manje intuitivna, Ona određuje korak uvećanja/umanjenja vrednosti prilikom kliktanja na sterlice gore/dole u polju za unos i standardna vrednost joj je 1. Ukoliko joj promenite vrednost na, recimo 3, vrednost će se uvećavati/umanjivati za 3 i ispravni unosi će biti 3, 6, 9, pa će vrednot, recimo 8 izazivati grešku. Isto je i sa decimalnim vrednostima, kao recimo 0.3 i sl. Standardni korak „1“ stoga podrazumeva ispravnim samo sve cele brojeve.

Međutim, ukoliko želite da svi brojčani unosi budu ispravni, kako celobrojni, tako i oni sa decimalnim delom, potrebno je postaviti osobinu „step“ na „any“ (bilo koji).


<input type="number" step="any" />

A ukoliko želite samo pozitivne brojeve dodajte i osobinu „min“ postavljenu na „0“.

Kod koraka postavljenog na „any“ korak uvećanja/umanjenja će biti „1“ i izgleda da nema mogućnosti da se u tom slučaju korak promeni.

Advertisements

Оставите одговор

Попуните детаље испод или притисните на иконицу да бисте се пријавили:

WordPress.com лого

Коментаришет користећи свој WordPress.com налог. Одјавите се / Промени )

Слика на Твитеру

Коментаришет користећи свој Twitter налог. Одјавите се / Промени )

Фејсбукова фотографија

Коментаришет користећи свој Facebook налог. Одјавите се / Промени )

Google+ photo

Коментаришет користећи свој Google+ налог. Одјавите се / Промени )

Повезивање са %s