Jak mogę ograniczyć możliwe dane wejściowe w elemencie „liczba” HTML5?

359

Dla <input type="number">elementu maxlengthnie działa. Jak mogę ograniczyć maxlengthdla tego elementu liczbowego?

Prasad
źródło
5
Dla osób szukających lepszego rozwiązania, ten jest najlepszy: stackoverflow.com/questions/9361193/…
Ünsal Korkmaz
4
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ć

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

jeśli dodasz zarówno wartość a, jak maxi minwartość, możesz określić zakres dozwolonych wartości:

<input type="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:

wprowadź opis zdjęcia tutaj

Kod cyklonowy
źródło
4
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 -->
<input type="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.

Komunikat weryfikacji Chrome dla liczb większych niż maks
Zrzut ekranu pobrany z Chrome 15

Państwo może używać HTML5 oninputzdarzenia w JavaScript, aby ograniczyć liczbę znaków:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}
Andy E.
źródło
11
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.

Duane
źródło
3
Ś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:

<input name="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.

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ą.

David Refoua
źródło
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:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
Maycow Moura
źródło
12
W swoim rozwiązaniu nie możesz użyć backspace po osiągnięciu 2 znaków. ale brakuje mi kilku rzeczy dla funkcjonalnego rozwiązania
Christophe Debove
12
Zamiast onKeyDowny powinieneś użyć onKeyPress.
Rupesh Arora,
1
nie będzie działać, jeśli podświetlisz tekst i naciśniesz znak (tzn.
zastąpisz
zatwierdź to, jeśli nie pochodzi z następujących kluczy stackoverflow.com/a/2353562/1534925
Akshay
3
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.)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

Następnie (jeśli chcesz) możesz sprawdzić, czy wprowadzono naprawdę liczbę

Richard
źródło
... Świetnie, ale nie potrzebujesz już min. I maks., Koleś. (tylko mówię)
xoxel
2
@xoxel robisz, jeśli chcesz, aby komunikat ostrzegawczy był nadal wyświetlany
DNKROZ
To jest naprawdę dobre ... Dzięki
Vincy Oommen
dla uogólnienia zrobiłbymonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
oriadam
18

Możesz podać go jako tekst, ale dodać pettern, który pasuje tylko do liczb:

<input type="text" pattern="\d*" maxlength="2">

Działa idealnie, a także na urządzeniach mobilnych (testowane na iOS 8 i Android) wyskakuje klawiatura numeryczna.

Chris Panayotoff
źródło
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.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" 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.

Prasad Shinde
źródło
1
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 MaxLength
function 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);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>

Brandon Buttars
źródło
10

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.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />
Neha Jain
źródło
Działa jak urok!
SiboVG
9

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; }

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
Stnfordly
źródło
8

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”):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
thdoan
źródło
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ę;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
Tim Wright
źródło
2
Nie. Spróbuj wkleić wartość.
Qwertiy,
6

Miałem ten problem wcześniej i rozwiązałem go za pomocą kombinacji typu liczby HTML5 i jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

scenariusz:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }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)){
            return false;
        }
    }
});

Nie wiem, czy wydarzenia są nieco przesadzone, ale rozwiązało to mój problem. JSfiddle

pochylić w dół
źródło
Możesz łatwo wklejać znaki.
Jessica
4

Wejście HTML

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });
Zabijaka
źródło
4

prostym sposobem ustawienia maksymalnej długości dla wprowadzania liczb jest:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
HexboY
źródło
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.

Jan Dragsbaek
źródło
3

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 mini max. To jQuery kończy to:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

Prawdopodobnie działałby również jako nazwana funkcja „oninput” bez jQuery, jeśli jeden z tych typów „jQuery-is-the-devil”.

Michael Cole
źródło
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.
	}
}

Poleciłbym również łączyć się maxlengthz kilkoma błędami mini maxzapobiegać błędnym przesyłaniom.

markus s
źródło
2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

lub jeśli nie możesz nic wprowadzić

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />
j4r3k
źródło
1

Możesz tego również spróbować w przypadku wprowadzania numerycznego z ograniczeniem długości

<input type="tel" maxlength="3" />
shinobi
źródło
@tiltdown Sry for mistype. Poprawiłem odpowiedź.
shinobi,
1

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 variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 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 text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * 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();
        } else if (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();
Philll_t
źródło
@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.

Marcel
źródło
0

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:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
Simon Berton
źródło