Jak najlepiej ograniczyć wprowadzanie „liczb” tylko dla pól tekstowych?
Szukam czegoś, co pozwala na kropki dziesiętne.
Widzę wiele przykładów. Ale jeszcze nie zdecydowałem, którego użyć.
Aktualizacja od Praveen Jeganathan
Nigdy więcej wtyczek, jQuery zaimplementowało swoją własną jQuery.isNumeric()
dodaną w wersji 1.7. Zobacz: https://stackoverflow.com/a/20186188/66767
jquery
validation
isnumeric
wenbert
źródło
źródło
Odpowiedzi:
Aktualizacja
Istnieje na to nowe i bardzo proste rozwiązanie:
Zobacz tę odpowiedź lub spróbuj sam na JSFiddle .
wtyczka jquery.numeric
Z powodzeniem zaimplementowałem wiele formularzy za pomocą wtyczki jquery.numeric .
Ponadto działa to również w obszarach tekstowych!
Pamiętaj jednak, że Ctrl + A, Kopiuj + Wklej (poprzez menu kontekstowe) oraz Przeciągnij + Upuść nie będą działać zgodnie z oczekiwaniami.
HTML 5
Dzięki szerszej obsłudze standardu HTML 5 możemy użyć
pattern
atrybutu inumber
typuinput
elementów, aby ograniczyć wprowadzanie tylko liczb. W niektórych przeglądarkach (zwłaszcza Google Chrome) działa również w celu ograniczenia wklejania treści nienumerycznych. Więcej informacji na tematnumber
i innych nowszych typów danych wejściowych można znaleźć tutaj .źródło
allowDecimal
opcja, gdy tylko chcę pozwolić na wartości całkowite. Źródło jest bardzo proste i dobrze napisane.type="number"
.Jeśli chcesz ograniczyć wprowadzanie danych (w przeciwieństwie do sprawdzania poprawności), możesz pracować z kluczowymi zdarzeniami. coś takiego:
I:
To natychmiast informuje użytkownika, że nie może wprowadzić znaków alfanumerycznych itp., A nie później w fazie sprawdzania poprawności.
Nadal będziesz chciał sprawdzić poprawność, ponieważ dane wejściowe można wypełnić, wycinając i wklejając za pomocą myszy lub ewentualnie autouzupełniacza formularzy, który może nie wyzwalać kluczowych zdarzeń.
źródło
$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
Myślałem, że najlepszą odpowiedzią była powyższa odpowiedź.
ale zgadzam się, że to trochę bolesne, że klawisze strzałek i przycisk usuwania przyciągają kursor do końca łańcucha (iz tego powodu został odesłany do mnie podczas testowania)
Dodałem w prostej zmianie
w ten sposób, jeśli zostanie naciśnięty dowolny przycisk, który nie spowoduje zmiany tekstu, zignoruj go. Dzięki temu możesz uderzać strzałkami i usuwać bez przeskakiwania do końca, ale usuwa wszystkie nieliczbowe teksty.
źródło
keypress
mogą być wykorzystane do dalszego uproszczenia, ponieważ najwyraźniejkeyup
ikeydown
wyzwalają dowolny klawisz klawiatury, podczas gdy wyzwalająkeypress
tylko klawisze „znakowe” (a więc nie uruchamiają klawiszy strzałek i kasują). Zobacz tę odpowiedź w celach informacyjnych: stackoverflow.com/a/1367720/1298685Wtyczka jquery.numeric zawiera kilka błędów, o których powiadomiłem autora. Umożliwia wiele kropek dziesiętnych w Safari i Operze, a w Operze nie można wpisywać spacji, klawiszy strzałek ani kilku innych znaków kontrolnych. Potrzebowałem dodatniej liczby całkowitej, więc ostatecznie napisałem własną.
źródło
Nigdy więcej wtyczek, jQuery zaimplementowało własną wersję jQuery.isNumeric () dodaną w wersji 1.7.
Wyniki próbek
Oto przykład, jak powiązać metodę isNumeric () z detektorem zdarzeń
źródło
var v = this.value;
zmienić navar v = this.value.replace(/,/g,'');
. Liczby takie21,345,67.800
są zbyt brane pod uwagę.$(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
Wspomniana wtyczka numeryczna () nie działa w Operze (nie można cofać, usuwać ani nawet używać klawiszy Wstecz lub Dalej).
Poniższy kod zarówno w JQuery, jak i JavaScript będzie działał idealnie (i to tylko dwie linie).
JQuery:
JavaScript:
Oczywiście dotyczy to wyłącznie wprowadzania liczbowego (plus klawisze Backspace, Delete, Forward / Back), ale można je łatwo zmienić tak, aby zawierały punkty i znaki minus.
źródło
Możesz użyć wtyczki Validation z jej metodą number () .
źródło
Podejście JavaScript
Podejście jQuery
AKTUALIZACJA
Powyższe odpowiedzi dotyczą najczęstszego przypadku użycia - sprawdzanie poprawności danych wejściowych jako liczby.
źródło
Poniżej znajduje się to, czego używam do dosłownie blokowania naciśnięć klawiszy. Pozwala to tylko na liczby 0–9 i przecinek dziesiętny. Łatwy do wdrożenia, nie ma dużo kodu i działa jak urok:
źródło
charCode != 46
z instrukcji if. Świetna odpowiedź!Jako niewielką poprawę tej sugestii możesz użyć wtyczki Validation z jej metodami number () , digits i range . Na przykład następujące zapewnia, że otrzymasz dodatnią liczbę całkowitą od 0 do 50:
źródło
Nie widać magicznego wyglądu i zniknięcia alfabetu po naciśnięciu klawisza. Działa to również w przypadku wklejania myszy.
źródło
/[^0-9.]/g
Najpierw próbowałem rozwiązać ten problem za pomocą jQuery, ale nie cieszyłem się, że niepożądane znaki (niebędące cyframi) faktycznie pojawiały się w polu wejściowym tuż przed ich usunięciem przy kluczowaniu.
Poszukując innych rozwiązań znalazłem to:
Liczby całkowite (nieujemne)
Źródło: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Przykład na żywo: http://jsfiddle.net/u8sZq/
Kropki dziesiętne (nieujemne)
Aby zezwolić na pojedynczy przecinek dziesiętny, możesz zrobić coś takiego:
Źródło: Właśnie to napisałem. Wydaje się, że działa. Przykład na żywo: http://jsfiddle.net/tjBsF/
Inne dostosowania
Niektóre rzeczy, które możesz zainteresować:
Niedociągnięcia
Wiem, że tytuł prosi o rozwiązania jQuery, ale mam nadzieję, że ktoś i tak okaże się przydatny.
źródło
Dzięki za post Dave Aaron Smith
Zredagowałem twoją odpowiedź, aby zaakceptować kropkę dziesiętną i liczbę z sekcji liczb. Ta praca jest dla mnie idealna.
źródło
I zastosuj to do wszystkich wymaganych danych wejściowych:
źródło
HTML5 obsługuje liczbę typów danych wejściowych z obsługą globalnej przeglądarki 88% + zgodnie z CanIUse z października 2015 r.
Nie jest to rozwiązanie związane z JQuery, ale zaletą jest to, że w telefonach komórkowych klawiatura Android zostanie zoptymalizowana do wprowadzania liczb.
Alternatywnie można użyć tekstu typu wejściowego z nowym parametrem „wzorzec”. Więcej szczegółów w specyfikacji HTML5.
Myślę, że jest to lepsze niż rozwiązanie jquery, ponieważ w tym pytaniu dostarczone rozwiązanie jquery nie obsługuje separatora tysięcy. Jeśli możesz użyć HTML5.
JSFiddle: https://jsfiddle.net/p1ue8qxj/
źródło
Ta funkcja robi to samo, wykorzystuje niektóre z powyższych pomysłów.
źródło
/ * to moja wersja przeglądarki dla wielu przeglądarek Jak zezwalać tylko na wartości liczbowe (0-9) w polu wejściowym HTML za pomocą jQuery?
* /
źródło
Wystarczy uruchomić zawartość za pomocą parseFloat (). Wróci
NaN
po niepoprawnym wejściu.źródło
Możesz użyć autoNumeric z decorplanit.com . Mają ładne wsparcie dla liczb, a także waluty, zaokrąglania itp.
Użyłem w środowisku IE6, z kilkoma poprawkami css, i to był rozsądny sukces.
Na przykład
numericInput
można zdefiniować klasę css , która mogłaby zostać użyta do dekoracji pól za pomocą liczbowych masek wprowadzania.zaadaptowane ze strony autoNumeric:
źródło
Myślę, że to dobry sposób na rozwiązanie tego problemu i jest niezwykle prosty:
Przykład: JSFiddle
Omówione scenariusze
Większość podobnych zaleceń zawodzi co najmniej jeden z nich lub wymaga dużo kodu, aby uwzględnić wszystkie te scenariusze.
home
,end
iarrow
klucze.delete
ibackspace
może być używany przy dowolnym indeksie.keyup
zdarzenie nie jest używane.Scenariusze nie powiodły się
0.5
i usuwanie tylko zera nie będzie działać. Można to naprawić, zmieniając wyrażenie regularne na,/^[0-9]*\.?[0-9]*$/
a następnie dodając zdarzenie rozmycia, aby dodać,0
gdy pole tekstowe zaczyna się od kropki dziesiętnej (w razie potrzeby). Zobacz ten zaawansowany scenariusz, aby uzyskać lepszy pomysł na rozwiązanie tego problemu.Podłącz
Stworzyłem tę prostą wtyczkę jquery, aby ułatwić to:
źródło
Najlepszym sposobem jest sprawdzenie wpływu pola tekstowego, gdy traci ono ostrość.
Możesz sprawdzić, czy zawartość jest „liczbą”, używając wyrażenia regularnego.
Lub możesz użyć wtyczki Validation, która w zasadzie robi to automatycznie.
źródło
Sprawdź ten kod znalezienia do korzystania z bazy danych:
źródło
To jest właśnie fragment kodu, który właśnie wykonałem (używając części kodu autorstwa Peter Mortensen / Keith Bentrup) w celu sprawdzenia całkowitej liczby procentowej w polu tekstowym (wymagane jest jQuery):
Ten kod:
Mam nadzieję, że to pomaga potrzebującym.
źródło
Znalazłem świetne rozwiązanie tutaj http://ajax911.com/numbers-numeric-field-jquery/
Właśnie zmieniłem „keyup” na „keydown” zgodnie z moimi wymaganiami
źródło
Jeśli używasz HTML5, nie musisz dokładać żadnych starań, aby przeprowadzić weryfikację. Po prostu użyj -
Atrybut kroku pozwala na poprawność kropki dziesiętnej.
źródło
Inny sposób na zachowanie pozycji karetki na wejściu:
Zalety:
Plunker: Demo działa
źródło
Właśnie znalazłem jeszcze lepszą wtyczkę. Daje ci znacznie większą kontrolę. Powiedz, że masz DOB pole którym potrzebujesz, aby było liczbowe, ale akceptuje także znaki „/” lub „-”.
Działa świetnie!
Sprawdź to na http://itgroup.com.ph/alphanumeric/ .
źródło
Ten kod działał na mnie całkiem dobrze, po prostu musiałem dodać 46 w tablicy controlKeys, aby użyć kropki, choć nie uważam, że to najlepszy sposób, aby to zrobić;)
źródło
Użyłem tego, z dobrymi wynikami ..
źródło
Jest to bardzo proste, że mamy już wbudowaną funkcję javascript „isNaN”.
źródło