atrybut max nie działa w przeglądarce Chrome na tablecie z Androidem.
Forever
4
@ ÜnsalKorkmaz: to rozwiązanie ma tę wadę, że nie wywołuje klawiatury numerycznej na urządzeniach z Androidem
będzie
Odpowiedzi:
340
I możesz dodać maxatrybut, który określi najwyższą możliwą liczbę, którą możesz wstawić
<inputtype="number"max="999"/>
jeśli dodasz zarówno wartość a, jak maxi minwartość, możesz określić zakres dozwolonych wartości:
<inputtype="number"min="1"max="999"/>
Powyższe nadal nie powstrzyma użytkownika przed ręcznym wprowadzeniem wartości spoza określonego zakresu. Zamiast tego zostanie wyświetlone wyskakujące okienko z poleceniem wprowadzenia wartości z tego zakresu po przesłaniu formularza, jak pokazano na tym zrzucie ekranu:
Krister, to zadziałało. Również, jak powiedział @Andy, użyłem oninput do wycięcia dodatkowych liczb. Odniesienie mathiasbynens.be/notes/oninput
Prasad
7
@Prasad - Jeśli odpowiedź Andy'ego jest prawidłowa, wybierz ją, zamiast najbardziej głosowanej.
Moshe
81
Jest to poprawne, ale należy zauważyć, że Andy stwierdza, że nie ogranicza to wpisywania dłuższej liczby. Więc tak naprawdę nie jest to odpowiednik maksymalnej długości w polu tekstowym.
DA.
9
Jeśli po prostu wprowadzisz zmiennoprzecinkową precyzję, to się zepsuje. Np. 3.1415926 omija ten problem, ponieważ jest mniejszy niż 999 i większy niż 1.
0112
44
Nie wiem, dlaczego jest to tak entuzjastyczne i akceptowane, gdy po prostu nie działa! Wpływa tylko na sterowanie „pokrętłem” i nie robi nic, aby powstrzymać użytkownika od wpisywania długich
cyfr
115
Możesz określić atrybuty mini max, które pozwolą na wprowadzanie danych tylko w określonym zakresie.
<!-- equivalent to maxlength=4 --><inputtype="number"min="-9999"max="9999">
Działa to jednak tylko w przypadku przycisków sterowania pokrętłem. Mimo że użytkownik może wpisać liczbę większą niż dozwolona max, formularz nie zostanie przesłany.
Zrzut ekranu pobrany z Chrome 15
Państwo może używać HTML5 oninputzdarzenia w JavaScript, aby ograniczyć liczbę znaków:
Jeden możliwy problem z tym podejściem JavaScript: może nie działać zgodnie z oczekiwaniami, jeśli punkt wstawiania nie znajduje się na końcu wartości. Na przykład, jeśli wpiszesz wartość „1234” w polu wprowadzania, a następnie przesuniesz punkt wstawiania z powrotem na początek wartości i wpisz „5”, otrzymasz wartość „5123”. Różni się to od pola typu wprowadzania = „tekst” o maksymalnej długości 4, w którym przeglądarka nie pozwala wpisać piątego znaku w polu „pełnym”, a wartość pozostanie „1234”.
Jon Schneider
@Andy, oczywiście pytanie szuka sposobu na nie-JS maxlength.............
Pacerier
4
@Pacerier: czy coś w mojej odpowiedzi sugerowało, że myślałem inaczej? Jak widać, zaproponowałem najbliższe możliwe rozwiązanie, które można osiągnąć przy użyciu tylko HTML, wraz z dodatkową sugestią, która wykorzystuje JavaScript, gdzie OP mógł chcieć uniemożliwić użytkownikowi wpisywanie większej liczby znaków niż dozwolone.
Andy E
84
Jeśli szukasz mobilnego rozwiązania internetowego , w którym chcesz, aby użytkownik widział klawiaturę numeryczną zamiast klawiatury pełnotekstowej. Użyj type = „tel”. Będzie działał z maksymalną długością, która oszczędza ci tworzenia dodatkowego javascript.
Max i Min nadal pozwalają użytkownikowi wpisywać liczby przekraczające max i min, co nie jest optymalne.
Świetne znalezisko, działało to jak urok, kciuki w górę za to, że nie musiałem tworzyć dodatkowego javascript.
Diego
9
Przekonałem się, że nie jest to najlepsze rozwiązanie dla wprowadzania numerycznego, ponieważ wejście „tel” pozwala na dodatkowe symbole i wyświetla litery obok każdej liczby. Czysto numeryczna klawiatura wygląda na znacznie czystszą.
hawkharris
@hawkharris Masz rację, wpisz = "liczba" to czystszy interfejs użytkownika. Łatwiej jest przypadkowo wpisać zły znak. Konieczna jest więc dodatkowa weryfikacja, aby upewnić się, że użytkownik nie wprowadzi złych danych. Należy również wziąć pod uwagę, że użytkownik może równie łatwo wprowadzić wszystkie kropki dziesiętne za pomocą klawiatury numerycznej. Ponadto nie rozwiązuje powyższego pytania bez dodatkowego JavaScript.
Duane,
1
Dziękuję, pracuję nad aplikacją mobilną z platformą jonową i to rozwiązało mój problem
Ahmed,
1
jeśli zostanie użyty ze wzorem = "[0-9] *" dodatkowe symbole zostaną wyłączone
apereira
71
Możesz połączyć te wszystkie w ten sposób:
<inputname="myinput_drs"oninput="maxLengthCheck(this)"type="number"maxlength="3"min="1"max="999"/><script>// This is an old version, for a more recent version look at// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/function maxLengthCheck(object){if(object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)}</script>
Aktualizacja: Możesz także chcieć zapobiec wprowadzaniu jakichkolwiek znaków nienumerycznych, ponieważ object.lengthbyłby to pusty ciąg dla wprowadzania liczb, a zatem jego długość byłaby 0. Dlatego maxLengthCheckfunkcja nie będzie działać.
Rozwiązanie: zobacz to lub tamto, aby zobaczyć przykłady.
To dobre rozwiązanie, ale uważam, że object.value.length zwraca 0, jeśli wprowadzono jakieś wartości nienumeryczne.
Andrew
1
@AndrewSpear To dlatego, że object.value byłby ciągiem pustym, jeśli wprowadzisz wartości nienumeryczne do danych wejściowych z ustawionym typem „liczba”. Zobacz dokumentację. Przeczytaj także moją aktualizację, aby rozwiązać ten problem.
David Refoua,
To nadal się psuje, jeśli wprowadzisz więcej niż jeden przecinek dziesiętny, np. 111..1111. Nie używaj tego kodu ze względów bezpieczeństwa, ponieważ złośliwy kod może nadal przechodzić.
PieBie,
@PieBie Koleś, ten kod jest ponad 3 lata temu. Zamiast tego użyj jQuery.
David Refoua,
1
tak, wiem o tym, ale początkujący mogą nadal po prostu skopiować i wkleić.
PieBie,
26
to bardzo proste, za pomocą jakiegoś javascript możesz symulować maxlength, sprawdź to:
Problem keydownpolega na tym, że nie można używać backspace przy maksymalnej liczbie znaków. Problem keypresspolega na tym, że możesz skopiować + wkleić więcej niż maksimum znaków.
Stavm,
23
Lub jeśli twoja maksymalna wartość wynosi na przykład 99 i minimum 0, możesz dodać to do elementu wejściowego (twoja wartość zostanie przepisana przez maksymalną wartość itp.)
Atrybut wzorca nie jest obsługiwany w IE9 i wcześniejszych wersjach oraz ma częściową obsługę w przeglądarce Safari: caniuse.com/#feat=input-pattern
dozweteran
Tak, dziękuję za wskazanie, ale porzuciliśmy obsługę IE9 (odcinając musztardę) i wolę to niż metody JS. Zależy od projektu.
Chris Panayotoff,
2
Użytkownik nie może temu zapobiec wprowadzania znaków nienumerycznych. Mogą wprowadzić 2 dowolnych znaków. patternTylko powoduje podświetlenie walidacji.
brt
testowany na Androida 9 (Nokia 8), ale dostaję zwykłą klawiaturę :( jakieś pomysły?
oriadam
14
//For Angular I have attached following snippet.
<divng-app=""><form>
Enter number: <inputtype="number"ng-model="number"onKeyPress="if(this.value.length==7)returnfalse;"min="0"></form><h1>You entered: {{number}}</h1></div>
Jeśli użyjesz zdarzenia „onkeypress”, nie uzyskasz żadnych ograniczeń użytkownika jako takich podczas programowania (przetestuj je). A jeśli masz wymagania, które nie pozwalają użytkownikowi wejść po określonym limicie, spójrz na ten kod i spróbuj raz.
Problemy, które tu widzę, to: 1. zamień na wybierz tekst i typ nie działa, jeśli dane wejściowe osiągnęły 7 liczb 2. zwiększając dane wejściowe o 1, gdy działa działanie przelewu „intern” -> 9999999 i kliknij w górę przycisk.
Łamie
Próbowałem z prostą wersją javascript. Jeśli chcesz, możesz zobaczyć za pomocą fragmentu kodu Uruchom. Jako takie nie znalazłem żadnych ograniczeń.
Prasad Shinde
1
Nie znalazłem też żadnych ograniczeń. Zatrzymuje się na 7 cyfrach. Używam tego rozwiązania do mojego kodu.
Claudio,
Istnieje ograniczenie. Po osiągnięciu limitu zaznacz wszystko i chcesz je zastąpić, to nie działa. Zastąpienie działa dla mnie tylko wtedy, gdy nadpisuję wartość cur, zanim zwrócę false.
Insomnia88,
@ Insomnia88, @ edub co jeśli napiszemy funkcję i sprawdzimy niezbędne warunki ...
Prasad Shinde
12
Inną opcją jest dodanie detektora do czegokolwiek z atrybutem maxlength i dodanie do niego wartości wycinka. Zakładając, że użytkownik nie chce używać funkcji wewnątrz każdego zdarzenia związanego z wejściem. Oto fragment kodu. Zignoruj kod CSS i HTML, liczy się JavaScript.
// Reusable Function to Enforce MaxLengthfunction enforce_maxlength(event){var t = event.target;if(t.hasAttribute('maxlength')){
t.value = t.value.slice(0, t.getAttribute('maxlength'));}}// Global Listener for anything with an maxlength attribute.// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
<labelfor="test_input">Text Input</label><inputid="test_input"type="text"maxlength="5"/><span>set to 5 maxlength</span><br><labelfor="test_input">Number Input</label><inputid="test_input"type="number"min="0"max="99"maxlength="2"/><span>set to 2 maxlength, min 0 and max 99</span>
Maksymalna długość nie będzie działać <input type="number"w najlepszy znany mi sposób, aby użyć oninputzdarzenia w celu ograniczenia maksymalnej długości . Proszę zobaczyć poniższy kod dla prostej implementacji.
<inputname="somename"oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Jak twierdzą inni, min / max nie jest tym samym co maxlength, ponieważ ludzie nadal mogą wejść w liczbę zmiennoprzecinkową, która byłaby większa niż maksymalna zamierzona długość ciągu. Aby naprawdę emulować atrybut maxlength, możesz zrobić coś takiego w mgnieniu oka (jest to równoważne z maxlength = „16”):
wycinek usunie znaki bez wiedzy użytkownika końcowego, jeśli zostanie wstawiony pomiędzy. podczas gdy maksymalna długość zostanie zablokowana.
Pradeep Kumar Prabaharan,
@PradeepKumarPrabaharan maxlengthnie jest obsługiwany przez dane liczbowe. W moim przykładzie value.slice(0,16)nie uruchomię się, chyba że wartość wejściowa będzie dłuższa niż 16 znaków.
thdoan
tak maxlength nie jest obsługiwany dla wprowadzania liczb .. ten kod jest gud, ale ten kod nie pasuje dokładnie do właściwości maxlength ..
Pradeep Kumar Prabaharan
@TobiasGaertner się tym type="number"zajmuje :).
thdoan
@ 10basetom ... w zależności od przeglądarki ... np. W FF nadal możesz wprowadzać znaki i nie zatrzymają się one po limicie - ale w związku z ideą numeru typu jest to dopuszczalne rozwiązanie.
Tobias Gaertner,
6
Odpowiedź Maycowa Moury była dobrym początkiem. Jednak jego rozwiązanie oznacza, że po wprowadzeniu drugiej cyfry cała edycja pola zatrzymuje się. Nie można więc zmieniać wartości ani usuwać żadnych znaków.
Poniższy kod zatrzymuje się na 2, ale pozwala kontynuować edycję;
$("input[name='minutes']").on('keyup keypress blur change',function(e){//return false if not 0-9if(e.which !=8&& e.which !=0&&(e.which <48|| e.which >57)){returnfalse;}else{//limit length but allow backspace so that you can still delete the numbers.if( $(this).val().length >= parseInt($(this).attr('maxlength'))&&(e.which !=8&& e.which !=0)){returnfalse;}}});
Nie wiem, czy wydarzenia są nieco przesadzone, ale rozwiązało to mój problem.
JSfiddle
nie działa na Androidzie Chrome. Onkeypress ma z tym pewne problemy.
Aakash Thakur
3
Podobnie jak w przypadku type="number"określenia właściwości maxzamiast maxlengthwłaściwości, która jest maksymalną możliwą liczbą. Tak więc z 4 cyframi maxpowinno być 99995 cyfr 99999i tak dalej.
Również jeśli chcesz się upewnić, że jest to liczba dodatnia, możesz ustawić min="0", zapewniając liczby dodatnie.
nie odpowiada poprawnie na pytanie, ale głosował, ponieważ rozwiązał mój problem :)
TrOnNe,
2
Jak okazało się, że nie można użyć dowolnego onkeydown, onkeypresslub onkeyupwydarzenia dla kompletnego rozwiązania w tym przeglądarek mobilnych. Nawiasem mówiąc, onkeypressjest przestarzały i nie jest już obecny w chrome / opera dla Androida (patrz: UI Events W3C Working Draft, 04 sierpnia 2016 ).
Znalazłem rozwiązanie, korzystając oninputtylko z tego wydarzenia. Może być konieczne wykonanie dodatkowej kontroli liczby, takiej jak znak ujemny / dodatni lub separator dziesiętny i separator tysięcy i tym podobne, ale na początek powinny wystarczyć:
function checkMaxLength(event){// Prepare to restore the previous value.if(this.oldValue ===undefined){this.oldValue =this.defaultValue;}if(this.value.length >this.maxLength){// Set back to the previous value.this.value = oldVal;}else{// Store the previous value.this.oldValue =this.value;// Make additional checks for +/- or ./, etc.// Also consider to combine 'maxlength'// with 'min' and 'max' to prevent wrong submits.}}
Wiem, że jest już odpowiedź, ale jeśli chcesz, aby Twoje dane wejściowe zachowywały się dokładnie tak, jak maxlengthatrybut lub jak najbliżej, użyj następującego kodu:
(function($){
methods ={/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax:function(){// set variablesvar
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x =0,
max ="";// If the element has maxlength apply the code.if(typeof maxlAttr !==typeofundefined&& maxlAttr !==false){// create a max equivelantif(typeof maxlAttr !==typeofundefined&& maxlAttr !==false){while(x < maxlAttr){
max +="9";
x++;}
maxAttR = max;}// Permissible Keys that can be used while the input has reached maxlengthvar keys =[8,// backspace9,// tab13,// enter46,// delete37,39,38,40// arrow keys<^>v]// Apply changes to element
$(this).attr("max", maxAttR)//add existing max or new max.keydown(function(event){// restrict key press on length reached unless key being used is in keys array or there is highlighted textif($(this).val().length == maxlAttr && $.inArray(event.which, keys)==-1&& methods.isTextSelected()==false)returnfalse;});;}},/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected:function(){// set text variable
text ="";if(window.getSelection){
text = window.getSelection().toString();}elseif(document.selection && document.selection.type !="Control"){
text = document.selection.createRange().text;}return(text.length >0);}};
$.maxlengthNumber =function(){// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));}})($)// Apply it:
$.maxlengthNumber();
@Phill_t może możesz mnie oświecić? Użyłem twojego kodu i działa on dobrze ALE „$ (this) .attr („ maxlength ”)” zawsze dostarcza 2. ORAZ dlaczego lepiej byłoby używać „$ (this) .attr („ maxlength ”)” czy to działało zamiast po prostu „this.maxlength”, które testowałem i działało zgodnie z oczekiwaniami i czy jest krótsze i czy imho również jest bardziej czytelne? Czy coś przegapiłem?
markus s
Co masz na myśli mówiąc „dostarcza 2”?
Philll_t
Przepraszam, przepraszam. „this.maxLength” działa tylko w zakresie funkcji skrótu klawiszowego. W funkcji „addMax” „ten” jest dokumentem, a nie oczekiwanym elementem, a zatem ma różne wartości atrybutów. Jak zamiast tego miałbym dostęp do wprowadzania liczb? Czy powyższy kod naprawdę działa po twojej stronie? Testowałem z Chrome / Opera / Vivaldi, Firefox, Edge, IE i Safari i miałem takie same wyniki dla każdej przeglądarki. Okej, w Edge maxlegth = „1” i maxlength = „2” gdzie rzeczywiście działa, ale „$ (this) .attr („ maxlength ”)” nie zwiększa się dalej dla żadnej większej liczby !!? @anybody: Wszelkie sugestie?
markus s
Jak powiedziałem, zawsze są dwa, ponieważ jest wywoływany w dokumencie, a nie w danym elemencie, jak się dowiedziałem podczas debugowania. Przy okazji, możesz również spojrzeć na moje rozwiązanie, które wymyśliłem po przestudiowaniu twojego: stackoverflow.com/a/41871960/1312012
markus s
0
Bardziej odpowiednie atrybuty do zastosowania to mini max.
Przy odrobinie javascript możesz wyszukać wszystkie dane lokalne-czasowe, sprawdzić, czy rok, w którym użytkownik próbuje wprowadzić dane, jest dłuższy niż 100 lat w przyszłości:
$('input[type=datetime-local]').each(function( index ){
$(this).change(function(){var today =newDate();var date =newDate(this.value);var yearFuture =newDate();
yearFuture.setFullYear(yearFuture.getFullYear()+100);if(date.getFullYear()> yearFuture.getFullYear()){this.value= today.getFullYear()+this.value.slice(4);}})});
Odpowiedzi:
I możesz dodać
max
atrybut, który określi najwyższą możliwą liczbę, którą możesz wstawićjeśli dodasz zarówno wartość a, jak
max
imin
wartość, możesz określić zakres dozwolonych wartości:Powyższe nadal nie powstrzyma użytkownika przed ręcznym wprowadzeniem wartości spoza określonego zakresu. Zamiast tego zostanie wyświetlone wyskakujące okienko z poleceniem wprowadzenia wartości z tego zakresu po przesłaniu formularza, jak pokazano na tym zrzucie ekranu:
źródło
Możesz określić atrybuty
min
imax
, które pozwolą na wprowadzanie danych tylko w określonym zakresie.Działa to jednak tylko w przypadku przycisków sterowania pokrętłem. Mimo że użytkownik może wpisać liczbę większą niż dozwolona
max
, formularz nie zostanie przesłany.Zrzut ekranu pobrany z Chrome 15
Państwo może używać HTML5
oninput
zdarzenia w JavaScript, aby ograniczyć liczbę znaków:źródło
maxlength
.............Jeśli szukasz mobilnego rozwiązania internetowego , w którym chcesz, aby użytkownik widział klawiaturę numeryczną zamiast klawiatury pełnotekstowej. Użyj type = „tel”. Będzie działał z maksymalną długością, która oszczędza ci tworzenia dodatkowego javascript.
Max i Min nadal pozwalają użytkownikowi wpisywać liczby przekraczające max i min, co nie jest optymalne.
źródło
Możesz połączyć te wszystkie w ten sposób:
Aktualizacja:
Możesz także chcieć zapobiec wprowadzaniu jakichkolwiek znaków nienumerycznych, ponieważ
object.length
byłby to pusty ciąg dla wprowadzania liczb, a zatem jego długość byłaby0
. DlategomaxLengthCheck
funkcja nie będzie działać.Rozwiązanie:
zobacz to lub tamto, aby zobaczyć przykłady.
Demo - Zobacz pełną wersję kodu tutaj:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
Aktualizacja 2: Oto kod aktualizacji: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
Aktualizacja 3: Należy pamiętać, że wprowadzenie więcej niż dziesiętnego miejsca może zepsuć się z wartością liczbową.
źródło
to bardzo proste, za pomocą jakiegoś javascript możesz symulować
maxlength
, sprawdź to:źródło
keydown
polega na tym, że nie można używać backspace przy maksymalnej liczbie znaków. Problemkeypress
polega na tym, że możesz skopiować + wkleić więcej niż maksimum znaków.Lub jeśli twoja maksymalna wartość wynosi na przykład 99 i minimum 0, możesz dodać to do elementu wejściowego (twoja wartość zostanie przepisana przez maksymalną wartość itp.)
Następnie (jeśli chcesz) możesz sprawdzić, czy wprowadzono naprawdę liczbę
źródło
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Możesz podać go jako tekst, ale dodać pettern, który pasuje tylko do liczb:
Działa idealnie, a także na urządzeniach mobilnych (testowane na iOS 8 i Android) wyskakuje klawiatura numeryczna.
źródło
pattern
Tylko powoduje podświetlenie walidacji.Jeśli użyjesz zdarzenia „onkeypress”, nie uzyskasz żadnych ograniczeń użytkownika jako takich podczas programowania (przetestuj je). A jeśli masz wymagania, które nie pozwalają użytkownikowi wejść po określonym limicie, spójrz na ten kod i spróbuj raz.
źródło
Inną opcją jest dodanie detektora do czegokolwiek z atrybutem maxlength i dodanie do niego wartości wycinka. Zakładając, że użytkownik nie chce używać funkcji wewnątrz każdego zdarzenia związanego z wejściem. Oto fragment kodu. Zignoruj kod CSS i HTML, liczy się JavaScript.
źródło
Maksymalna długość nie będzie działać
<input type="number"
w najlepszy znany mi sposób, aby użyćoninput
zdarzenia w celu ograniczenia maksymalnej długości . Proszę zobaczyć poniższy kod dla prostej implementacji.źródło
Powiedzmy, że chciałeś, aby maksymalna dozwolona wartość wynosiła 1000 - albo na maszynie, albo za pomocą pokrętła.
Ograniczasz wartości pokrętła za pomocą:
type="number" min="0" max="1000"
i ogranicz to, co jest wpisywane przez klawiaturę za pomocą javascript:
onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }
„źródło
Jak twierdzą inni, min / max nie jest tym samym co maxlength, ponieważ ludzie nadal mogą wejść w liczbę zmiennoprzecinkową, która byłaby większa niż maksymalna zamierzona długość ciągu. Aby naprawdę emulować atrybut maxlength, możesz zrobić coś takiego w mgnieniu oka (jest to równoważne z maxlength = „16”):
źródło
maxlength
nie jest obsługiwany przez dane liczbowe. W moim przykładzievalue.slice(0,16)
nie uruchomię się, chyba że wartość wejściowa będzie dłuższa niż 16 znaków.type="number"
zajmuje :).Odpowiedź Maycowa Moury była dobrym początkiem. Jednak jego rozwiązanie oznacza, że po wprowadzeniu drugiej cyfry cała edycja pola zatrzymuje się. Nie można więc zmieniać wartości ani usuwać żadnych znaków.
Poniższy kod zatrzymuje się na 2, ale pozwala kontynuować edycję;
źródło
Miałem ten problem wcześniej i rozwiązałem go za pomocą kombinacji typu liczby HTML5 i jQuery.
scenariusz:
Nie wiem, czy wydarzenia są nieco przesadzone, ale rozwiązało to mój problem. JSfiddle
źródło
Wejście HTML
jQuery
źródło
prostym sposobem ustawienia maksymalnej długości dla wprowadzania liczb jest:
źródło
Podobnie jak w przypadku
type="number"
określenia właściwościmax
zamiastmaxlength
właściwości, która jest maksymalną możliwą liczbą. Tak więc z 4 cyframimax
powinno być9999
5 cyfr99999
i tak dalej.Również jeśli chcesz się upewnić, że jest to liczba dodatnia, możesz ustawić
min="0"
, zapewniając liczby dodatnie.źródło
Ugh. To tak, jakby ktoś zrezygnował w połowie z wdrożenia i pomyślał, że nikt nie zauważy.
Z jakiegokolwiek powodu powyższe odpowiedzi nie używają atrybutów
min
imax
. To jQuery kończy to:Prawdopodobnie działałby również jako nazwana funkcja „oninput” bez jQuery, jeśli jeden z tych typów „jQuery-is-the-devil”.
źródło
Jak okazało się, że nie można użyć dowolnego
onkeydown
,onkeypress
lubonkeyup
wydarzenia dla kompletnego rozwiązania w tym przeglądarek mobilnych. Nawiasem mówiąc,onkeypress
jest przestarzały i nie jest już obecny w chrome / opera dla Androida (patrz: UI Events W3C Working Draft, 04 sierpnia 2016 ).Znalazłem rozwiązanie, korzystając
oninput
tylko z tego wydarzenia. Może być konieczne wykonanie dodatkowej kontroli liczby, takiej jak znak ujemny / dodatni lub separator dziesiętny i separator tysięcy i tym podobne, ale na początek powinny wystarczyć:Poleciłbym również łączyć się
maxlength
z kilkoma błędamimin
imax
zapobiegać błędnym przesyłaniom.źródło
lub jeśli nie możesz nic wprowadzić
źródło
Możesz tego również spróbować w przypadku wprowadzania numerycznego z ograniczeniem długości
źródło
Wiem, że jest już odpowiedź, ale jeśli chcesz, aby Twoje dane wejściowe zachowywały się dokładnie tak, jak
maxlength
atrybut lub jak najbliżej, użyj następującego kodu:źródło
Bardziej odpowiednie atrybuty do zastosowania to
min
imax
.źródło
To może komuś pomóc.
Przy odrobinie javascript możesz wyszukać wszystkie dane lokalne-czasowe, sprawdzić, czy rok, w którym użytkownik próbuje wprowadzić dane, jest dłuższy niż 100 lat w przyszłości:
źródło