Jak uzyskać „rzeczywistą” wartość <input type="number">
pola?
Mam input
pudełko i używam nowszego typu wprowadzania HTML5 number
:
<input id="edQuantity" type="number">
Jest to obsługiwane głównie w Chrome 29:
Teraz potrzebuję możliwości odczytania „surowej” wartości wprowadzonej przez użytkownika w polu wprowadzania. Jeśli użytkownik wprowadził numer:
wtedy edQuantity.value = 4
i wszystko jest w porządku.
Ale jeśli użytkownik wprowadzi nieprawidłowy tekst, chcę pokolorować pole wejściowe na czerwono:
Niestety, dla type="number"
pola wejściowego, jeśli wartość w polu tekstowym nie jest liczbą, to value
zwraca pusty ciąg:
edQuantity.value = "" (String);
(przynajmniej w Chrome 29)
Jak mogę uzyskać „surową” wartość <input type="number">
kontrolki?
Próbowałem przejrzeć listę innych właściwości pola wprowadzania w Chrome:
nie widziałem niczego, co przypominałoby rzeczywiste dane wejściowe.
Nie mogłem też znaleźć sposobu, aby stwierdzić, czy pudełko jest „puste” , czy nie. Może mogłem wywnioskować:
value isEmpty Conclusion
============= ============= ================
"4" false valid number
"" true empty box; not a problem
"" false invalid text; color it red
Uwaga : możesz zignorować wszystko po linii poziomej; to tylko wypełniacz, aby uzasadnić pytanie. Ponadto: nie myl przykładu z pytaniem. Ludzie mogą chcieć odpowiedzi na to pytanie z powodów innych niż kolorowanie ramki na czerwono (jeden przykład: konwersja tekstu "four"
na "4"
symbol łaciński podczas zdarzenia onBlur)
Jak mogę uzyskać „surową” wartość <input type="number">
kontrolki?
Czytanie bonusowe
źródło
number
to nie jest typem wejściowym, którego szukasz; użyj normalnegotext
wejścia.validity
stanu - Spodziewam się,typeMismatch
ale nie sprawdził się.blah
to nieprawidłowa liczba”.Odpowiedzi:
Zgodnie z WHATWG nie powinieneś być w stanie uzyskać wartości, chyba że jest to prawidłowe dane liczbowe. Algorytm oczyszczania pola numeru wejściowego mówi, że przeglądarka ma ustawić wartość na pusty ciąg, jeśli dane wejściowe nie są prawidłową liczbą zmiennoprzecinkową.
Określając typ (
<input type="number">
), prosisz przeglądarkę o wykonanie jakiejś pracy za Ciebie. Jeśli z drugiej strony chciałbyś móc przechwycić nieliczbowe dane wejściowe i coś z nimi zrobić, musiałbyś polegać na starym wypróbowanym i prawdziwym polu wprowadzania tekstu i samodzielnie przeanalizować zawartość.W3 ma także te same specyfikacje i dodaje:
źródło
<input type="number">
), prosisz przeglądarkę o wykonanie jakiejś pracy za Ciebie. Osobiście po prostu prosiłem przeglądarki mobilne, aby pokazały klawiaturę numeryczną i otrzymałem potwierdzenie jako nieprzyjemny dodatek. Większość z tych problemów wynika z faktu, żetype
atrybut określa zarówno reguły walidacji, jak i reguły dotyczące mechanizmu wprowadzania danych do wyświetlenia, ale całkiem możliwe jest wyświetlenie klawiatury numerycznej użytkownikom mobilnym bez konieczności stosowania sprawdzania poprawności liczb na komputerach stacjonarnych. HTML 5.1 przynajmniej ostatecznie rozwiąże ten problem za pomocąinputmode
atrybutu.Nie odpowiada na pytanie, ale użytecznym obejściem jest sprawdzenie
Element
ValidityState
obiektu daje wskazówki o tym, co wprowadził użytkownik. Rozważmy danetype="number"
wejściowe z amin
imax
setMy zawsze chcemy użyć
.validity.valid
.Inne właściwości podają tylko informacje o bonusie:
Przed użyciem musisz upewnić się, że przeglądarka obsługuje walidację HTML5:
Premia
Spudly ma przydatną odpowiedź, którą usunął:
źródło
.validity
właściwość, ale nie obsługuje poprawnie.valid
?!typeMismatch
może mieć sens, ale dotyczy to tylko e-maili lub adresów URL…required
).badInput
dodano 20.11.2012 . Ale nikt nie powinien patrzeć,badInput
czy dane wejściowe są prawidłowe; powinni patrzeć.valid
. Możliwe (i poprawne).badInput
może być fałsz i nadal mieć nieprawidłowe dane wejściowe..valid
definiuje się jako brak jakichkolwiek błędów walidacji (np. niedopasowania, przepełnienia, niedopełnienia), co.badInput
stanowi tylko jeden rodzaj błędu. Zwróć uwagę na powyższy wykres, gdzie.badInput
jest fałsz, ale dane wejściowe są nadal nieprawidłowe.źródło
Śledź wszystkie wciśnięte klawisze na podstawie ich kodów klawiszy
Przypuszczam, że można by słuchać zdarzeń keyup i zachować tablicę wszystkich wprowadzonych znaków na podstawie ich kodów klawiszy. Ale jest to dość żmudne zadanie i prawdopodobnie podatne na błędy.
http://unixpapa.com/js/key.html
Wybierz wejście i uzyskaj wybór jako ciąg
Cały kredyt dla: int32_t
źródło
Delete
,Backspace
,Ctrl+X
,Ctrl+V
,Right-click-cut
,Right-click-paste
.