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

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

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:

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.

^{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); 
    }
}

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.

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

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;" />

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ę

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.

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

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>

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"
 />

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

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)">

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);"

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

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

  });

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); }" />

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.

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

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.

<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" />

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

<input type="tel" maxlength="3" />

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();

Bardziej odpowiednie atrybuty do zastosowania to mini max.

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