Wie kann ich mögliche Eingaben in ein HTML5-Element "number" einschränken?

Für <input type="number">Element maxlengthfunktioniert nicht. Wie kann ich das maxlengthElement für diese Nummer einschränken ?

Außerdem können Sie ein maxAttribut hinzufügen , das die höchstmögliche Zahl angibt, die Sie einfügen können

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

Wenn Sie sowohl einen maxals auch einen minWert hinzufügen , können Sie den Bereich der zulässigen Werte angeben:

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

Das oben Gesagte hindert einen Benutzer immer noch nicht daran, einen Wert außerhalb des angegebenen Bereichs manuell einzugeben. Stattdessen wird ihm ein Popup angezeigt, in dem er aufgefordert wird, beim Senden des Formulars einen Wert innerhalb dieses Bereichs einzugeben, wie in diesem Screenshot gezeigt:

Sie können die Attribute minund angeben max, mit denen nur innerhalb eines bestimmten Bereichs eingegeben werden kann.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Dies funktioniert jedoch nur für die Spinner-Steuertasten. Obwohl der Benutzer möglicherweise eine Nummer eingeben kann max, die größer als die zulässige ist , wird das Formular nicht gesendet.

^{Screenshot aus Chrome 15}

Sie können das HTML5- oninputEreignis in JavaScript verwenden, um die Anzahl der Zeichen zu begrenzen:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

Wenn Sie nach einer mobilen Weblösung suchen, bei der Ihr Benutzer einen Nummernblock anstelle einer Volltexttastatur sehen soll. Verwenden Sie type = "tel". Es funktioniert mit maximaler Länge, wodurch Sie kein zusätzliches Javascript erstellen müssen.

Mit Max und Min kann der Benutzer weiterhin Zahlen eingeben, die über max und min hinausgehen, was nicht optimal ist.

Sie können all dies folgendermaßen kombinieren:

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

Update:
Möglicherweise möchten Sie auch verhindern, dass nicht numerische Zeichen eingegeben werden, da object.lengthdies eine leere Zeichenfolge für die Zahleneingaben ist und daher deren Länge 0. Somit maxLengthCheckfunktioniert die Funktion nicht.

Lösung: Beispiele finden
Sie hier oder hier .

Demo - Die Vollversion des Codes finden Sie hier:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Update 2: Hier ist der Update-Code: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Update 3: Bitte beachten Sie, dass die Eingabe von mehr als einem Dezimalpunkt den Zahlenwert verfälschen kann.

Es ist sehr einfach, mit etwas Javascript können Sie ein simulieren maxlength, probieren Sie es aus:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

Wenn Ihr Maximalwert beispielsweise 99 und der Minimalwert 0 ist, können Sie dies zum Eingabeelement hinzufügen (Ihr Wert wird durch Ihren Maximalwert usw. neu geschrieben).

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

Dann (wenn Sie möchten) können Sie überprüfen, ob die Eingabe wirklich eine Nummer ist

Sie können es als Text angeben, aber Pettern hinzufügen, die nur mit Zahlen übereinstimmen:

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

Es funktioniert perfekt und auch auf Mobilgeräten (getestet auf iOS 8 und Android) erscheint die Zifferntastatur.

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

Wenn Sie das Ereignis "onkeypress" verwenden, erhalten Sie während der Entwicklung keine Benutzereinschränkungen als solche (Unit-Test). Wenn Sie Anforderungen haben, die es dem Benutzer nicht erlauben, nach einem bestimmten Limit einzugeben, sehen Sie sich diesen Code an und versuchen Sie es einmal.

Eine andere Möglichkeit besteht darin, einfach einen Listener für alles mit dem Attribut maxlength hinzuzufügen und den Slice-Wert hinzuzufügen. Angenommen, der Benutzer möchte nicht in jedem Ereignis, das sich auf die Eingabe bezieht, eine Funktion verwenden. Hier ist ein Code-Snippet. Ignorieren Sie den CSS- und HTML-Code. Auf JavaScript kommt es an.

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

Die maximale Länge funktioniert nicht so, <input type="number"wie ich es am besten kenne, oninputwenn ich das Ereignis verwende, um die maximale Länge zu begrenzen. Bitte beachten Sie den folgenden Code für eine einfache Implementierung.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

Nehmen wir an, Sie wollten, dass der maximal zulässige Wert 1000 beträgt - entweder getippt oder mit dem Spinner.

Sie beschränken die Spinnerwerte mit: type="number" min="0" max="1000"

und beschränken Sie, was von der Tastatur mit Javascript eingegeben wird: 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; }">

Wie von anderen angegeben, ist min / max nicht dasselbe wie maxlength, da Personen immer noch einen Float eingeben können, der größer ist als die von Ihnen beabsichtigte maximale Stringlänge. Um das maxlength-Attribut wirklich zu emulieren, können Sie zur Not so etwas tun (dies entspricht maxlength = "16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

Maycow Mouras Antwort war ein guter Anfang. Seine Lösung bedeutet jedoch, dass bei Eingabe der zweiten Ziffer alle Bearbeitungen des Feldes gestoppt werden. Sie können also keine Werte ändern oder Zeichen löschen.

Der folgende Code stoppt bei 2, ermöglicht jedoch die Fortsetzung der Bearbeitung.

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

Ich hatte dieses Problem schon einmal und habe es mit einer Kombination aus HTML5-Nummerntyp und jQuery gelöst.

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

Skript:

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

Ich weiß nicht, ob die Ereignisse etwas übertrieben sind, aber es hat mein Problem gelöst. JSfiddle

HTML-Eingabe

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

  });

Eine einfache Möglichkeit, die maximale Länge für Zahleneingaben festzulegen, ist:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

Wie bei geben type="number"Sie eine Eigenschaft maxanstelle von an maxlength, bei der es sich um die maximal mögliche Anzahl handelt. Also mit 4 Ziffern maxsollte es sein 9999, 5 Ziffern 99999und so weiter.

Wenn Sie sicherstellen möchten, dass es sich um eine positive Zahl handelt, können Sie auch min="0"positive Zahlen festlegen .

Pfui. Es ist, als hätte jemand die Hälfte der Implementierung aufgegeben und gedacht, niemand würde es bemerken.

Aus irgendeinem Grund verwenden die obigen Antworten die Attribute minund nicht max. Diese jQuery beendet es:

    $('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);
    });

Es würde wahrscheinlich auch als benannte Funktion "oninput" ohne jQuery funktionieren, wenn Sie einen dieser "jQuery-is-the-devil" -Typen haben.

Wie ich herausgefunden , können Sie nicht von verwenden onkeydown, onkeypressoder onkeyupEreignisse für eine Komplettlösung einschließlich mobilen Browser. Übrigens onkeypressist veraltet und in Chrome / Opera für Android nicht mehr vorhanden (siehe: UI Events W3C Working Draft, 04. August 2016 ).

Ich habe eine Lösung nur mit dem oninputEreignis gefunden. Möglicherweise müssen Sie nach Bedarf eine zusätzliche Nummernprüfung durchführen, z. B. ein negatives / positives Vorzeichen oder Dezimal- und Tausendertrennzeichen und dergleichen. Zunächst sollte jedoch Folgendes ausreichen:

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

Ich würde auch zu kombinieren , empfehlen maxlengthmit minund maxfalsch vorträgt zu verhindern , wie oben mehrmals erwähnt.

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

oder wenn du nichts eingeben willst

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

Sie können dies auch für numerische Eingaben mit Längenbeschränkung versuchen

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

Ich weiß, dass es bereits eine Antwort gibt, aber wenn Sie möchten, dass sich Ihre Eingabe genau wie das maxlengthAttribut verhält oder so nah wie möglich ist, verwenden Sie den folgenden Code:

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

Weitere relevante Attribute wären minund max.

Dies könnte jemandem helfen.

Mit ein wenig Javascript können Sie nach allen datetime-lokalen Eingaben suchen und suchen, ob das Jahr, in dem der Benutzer eine Eingabe versucht, größer als 100 Jahre in der Zukunft ist:

$('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);
      }
    })
  });