2012-05-25 12 views
23

Mam następujące znaczniki:Chrome/HTML5: numer typu wejścia nieprzestrzegający atrybutu max?

<input type="number" max="99" /> 

W Google Chrome (i ewentualnie innych przeglądarek WebKit), będzie to ograniczać spinner na strzałki w górę od wykraczających ponad 99, ale nie uniemożliwić użytkownikowi wpisując liczba wyższa niż 99. Nawet onblur, niepoprawna wartość nie jest usuwana/zamieniana lub nawet ostrzeżenie, ponieważ wartość jest nieważna.

Czy źle rozumiem, jak to ma działać, czy jest to błąd? Używam najnowszej wersji Chrome (19 w chwili pisania).

Edit:

celu wyjaśnienia, chcę wiedzieć, dlaczego liczba większa niż określona max może być wprowadzona w pierwszej kolejności. Zdaję sobie sprawę, że podaje on etykietkę na formularzu, informując Cię, że jest nieważny, ale wydaje się, że niespójne zachowanie nie pozwoli ci przekroczyć maksimum, ale możesz po prostu wpisać liczbę powyżej maksimum w dowolnym momencie, aby ominąć to.

Jeśli to pożądane zachowanie z jakiegoś powodu, dlaczego tak jest? I czy istnieje lepsza opcja wymuszenia zakresu wejściowego bez uciekania się do JS?

+0

działa dobrze dla mnie, otrzymuję komunikat o błędzie „Wartość musi być mniejsza lub równa 99.”. Czy możemy zobaczyć twój aktualny kod? –

+0

Chrome i Opera wysyłają ostrzeżenie, gdy próbuję przesłać formularz, którego numer jest poza zakresem: http://jsfiddle.net/j08691/Uv3EA/ – j08691

+0

Dlaczego to ma być widoczne tylko przy składaniu formularza? A co ważniejsze, dlaczego jest w ogóle dozwolona? Ogranicza spinner, więc nie możesz użyć tego, aby wprowadzić wyższą wartość - dlaczego nie ma również ręcznego wprowadzania? I nie mogę użyć maksymalnej długości ani wzoru, aby to ograniczyć, ponieważ nie są one odpowiednie dla wejść typu liczbowego. Utknąłem, pisząc kleksy JS ... – FtDRbwLXw6

Odpowiedz

8

To działa, ale tylko pojawi się komunikat o błędzie (etykietka), jeśli umieścić przycisk Prześlij i formularz do kodu:

<form action="#" method="get"> 
    <input type="number" max="99" /> 
    <input type="submit" value="Submit!" /> 
</form> 

jsFiddle

+4

Dziękuję, ale pokazuje tylko komunikat o błędzie. Bardziej niepokoi mnie, dlaczego dopuszcza wartość, która jest większa niż maksymalna w pierwszej kolejności. Sterowanie pokrętłem nie pozwala ci przekroczyć maksimum, więc dlaczego pozwala ci wpisać liczbę większą? Wydaje mi się, że to niedopatrzenie lub błąd. – FtDRbwLXw6

+1

Najwyraźniej moce, które nie zgadzają się z moją klasyfikacją tego jako błędu. – FtDRbwLXw6

+8

To jest całkowicie błąd, proszę powtórzyć ich niedopatrzenie: c – Vix

1

To stara sprawa, ale Nie znalazłem żadnych odpowiednich odpowiedzi na to pytanie w dowolnym miejscu. to zachowanie jest nadal w chromie (wersja 61).

Znalazłem małą sztuczkę, której można użyć w niektórych sytuacjach. Jest to istotne dla tych, którzy używają bibliotek wiążących dane, takich jak aurelia, angular itp. Testowałem tylko na aureliach - ale to powinno działać również dla innych.

Sztuczka polega na tym, że dane wejściowe typu range wymuszają więzy min/max.

Po prostu tworzymy kolejne wejście (typu range), które jest ograniczone do tej samej wartości, co zwykłe wejście, i ukrywamy je poprzez css.

, gdy użytkownik wprowadzi coś, co jest większe niż wartość max, powróci do wartości max.

oto demo Aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad

Powiązane problemy