Wie kann ich mögliche Eingaben in einem HTML5-Element "number" begrenzen?

Sie können die Attribute min und max angeben, die die Eingabe nur innerhalb eines bestimmten Bereichs zulassen.

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

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

^{Screenshot aus Chrome 15}

Sie can verwenden das HTML5-Ereignis oninput in JavaScript, 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 Mobile Web - Lösung suchen, in der Ihr Benutzer einen Nummernblock anstelle einer Volltext-Tastatur sehen soll. Verwenden Sie type = "tel". Es funktioniert mit maxlength, was Ihnen die Erstellung von zusätzlichem Javascript erspart.

Mit Max und Min kann der Benutzer immer noch Zahlen eingeben, die über Max und Min hinausgehen, was nicht optimal ist.

Sie können all dies wie folgt 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.length eine leere Zeichenfolge für die Zahleneingaben wäre und die Länge daher 0 lautet. Daher funktioniert die Funktion maxLengthCheck nicht.

Lösung:
Siehe dies oder das für Beispiele.

Demo - Die vollständige Version 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 beeinträchtigen kann.

es ist sehr einfach, mit etwas Javascript können Sie eine maxlength simulieren.

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

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

<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 Zahl wirklich eingegeben wird

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

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

Es funktioniert perfekt und auch auf dem Handy (getestet auf iOS 8 und Android) erscheint die Zahlentastatur.

//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 "onkeypress" -Ereignis verwenden, werden Sie während der Entwicklung keine Benutzereinschränkungen als solche erhalten (Komponententest). Und wenn Sie eine Anforderung haben, die es dem Benutzer nicht erlaubt, nach einem bestimmten Grenzwert einzugeben, schauen Sie sich diesen Code an und versuchen Sie es einmal.

Wie von anderen angegeben, ist min/max nicht gleich maxlength, da Personen trotzdem 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 etwas wie folgt tun (dies entspricht maxlength = "16"):

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

Die maximale Länge funktioniert nicht mit <input type="number". Die beste Methode, die ich kenne, ist die Verwendung von oninput, um die maximale Länge zu begrenzen. Bitte beachten Sie den Code unten 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"
 />

Die Antwort von Maycow Moura war ein guter Anfang ... Allerdings bedeutet seine Lösung, dass mit der Eingabe der zweiten Ziffer die Bearbeitung des Feldes beendet wird. Sie können also keine Werte ändern oder Zeichen löschen.

Der folgende Code endet bei 2, erlaubt jedoch die Bearbeitung.

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

Eine weitere Option ist, einfach einen Listener für alles mit dem Attribut maxlength hinzuzufügen und den Slice-Wert hinzuzufügen. Angenommen, der Benutzer möchte keine Funktion in jedem Ereignis verwenden, das sich auf die Eingabe bezieht. Hier ist ein Codeausschnitt. Ignorieren Sie den CSS- und HTML-Code. Das wichtigste ist 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>

Ich hatte dieses Problem schon einmal und habe es mit einer Kombination aus html5 number type 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 ein bisschen übertrieben sind, aber mein Problem wurde gelöst . JSfiddle

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

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

maxlength für die Eingabe von Zahlen kann auf einfache Weise eingestellt werden:

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

Wie bei type="number" geben Sie eine max anstelle der maxlength-Eigenschaft an. Dies ist die maximal mögliche Anzahl. Bei 4 Stellen sollte max9999 sein, 5 Stellen 99999 und so weiter.

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

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

  });

Wie ich herausgefunden habe, können Sie keine der onkeydown-, onkeypress- oder onkeyup-Ereignisse für eine vollständige Lösung einschließlich mobiler Browser verwenden. Übrigens ist onkeypress 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 gefunden, die nur das oninput -Ereignis verwendet. Sie müssen ggf. zusätzliche Nummern prüfen, z. B. negatives/positives Vorzeichen oder Dezimal- und Tausendertrennzeichen und dergleichen, aber als Start sollte 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 empfehlen, maxlength mit min und max zu kombinieren, um falsche Einreichungen wie oben angegeben mehrmals zu verhindern.

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

Aus irgendeinem Grund verwenden die obigen Antworten nicht die Attribute min und 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));
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value));
    });

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

Ich weiß, dass es bereits eine Antwort gibt, aber wenn Sie möchten, dass sich Ihre Eingabe genau wie das maxlength-Attribut verhält oder so nahe wie möglich, verwenden Sie 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();

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

oder wenn du nichts eingeben kannst

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

Schreib einfach das ...

<input type="text" onkeypress="return event.target.value.length < 13"  placeholder="Enter Identity card number" class="form-control">

Wer sucht nach einer globalen Einschränkung wie ich:

$(document).on('keypress','input[type="number"][maxlength]', function(){
    return this.value.length < +this.attributes.maxlength.value;
});

Dadurch wird jeder Tastendruck im Dokument erfasst und gefiltert, wenn die Eingabe eine Zahl ist und ein maxlength-Attribut enthält. Lässt dann die gedrückte Taste zu, wenn die Länge nicht die maximale Länge erreicht hat. Es funktioniert auch mit dynamisch hinzugefügten Eingängen und Modalen usw.

Weitere relevante Attribute sind min und max.