Wie kann ich die maximale Länge in einem HTML5-Element “input type=number” festlegen?

Lesezeit: 7 Minuten

Wie kann ich die maximale Lange in einem HTML5 Element input
Prasad

Zum <input type="number"> Element, maxlength funktioniert nicht. Wie kann ich das einschränken maxlength für dieses Zahlenelement?

  • max-Attribut funktioniert nicht im Chrome-Browser auf Android-Tablets.

    – Für immer

    4. Februar 2014 um 7:04 Uhr

Wie kann ich die maximale Lange in einem HTML5 Element input
Zykloncode

Und Sie können ein hinzufügen max Attribut, das die höchstmögliche Zahl angibt, die Sie einfügen dürfen

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

wenn Sie beide hinzufügen a max und ein min value können Sie den Bereich der zulässigen Werte angeben:

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

Das obige wird noch nicht verhindern, dass ein Benutzer manuell einen Wert außerhalb des angegebenen Bereichs eingibt. Stattdessen wird ihm ein Popup angezeigt, in dem er aufgefordert wird, beim Absenden des Formulars einen Wert innerhalb dieses Bereichs einzugeben, wie in diesem Screenshot gezeigt:

Geben Sie hier die Bildbeschreibung ein

  • Krister, das hat funktioniert. Auch wie @Andy sagte, habe ich den Oninput verwendet, um die zusätzlichen Zahlen zu schneiden. Referenz mathiasbynens.be/notes/oninput

    – Prasad

    2. Dezember 2011 um 11:41 Uhr

  • Das ist richtig, sollte aber beachtet werden, da Andy angibt, dass dies einen nicht daran hindert, eine längere Zahl einzugeben. Es ist also nicht wirklich das Äquivalent von maxlength in einem Textfeld.

    – DA.

    20. März 2012 um 23:14 Uhr

  • DA: sicher, aber du könntest es gebrauchen min="-999" max="999" fälschen maxlength="3".

    – Quentin S.

    1. August 2014 um 13:50 Uhr

  • Wenn Sie einfach einen Float mit höherer Genauigkeit eingegeben haben, wird dieser brechen. ZB 3.1415926 umgeht dies, weil es kleiner als 999 und größer als 1 ist.

    – 0112

    8. Oktober 2014 um 21:58 Uhr

  • Ich weiß nicht, warum dies so positiv bewertet und akzeptiert wird, wenn es einfach nicht funktioniert! Es wirkt sich nur auf die “Spinner”-Steuerelemente aus und hindert den Benutzer nicht daran, eine lange Zahl einzugeben.

    – Codemonkey

    31. Juli 2015 um 11:15 Uhr

1646310133 602 Wie kann ich die maximale Lange in einem HTML5 Element input
Andi E

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

<!-- 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 Zahl eingeben kann, die größer als die zulässige ist maxwird das Formular nicht gesendet.

Die Validierungsmeldung von Chrome für Zahlen größer als die max

Screenshot aus Chrome 15

Sie kann Verwenden Sie HTML5 oninput Ereignis in JavaScript, um die Anzahl der Zeichen zu begrenzen:

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

  • Ein mögliches Problem bei diesem JavaScript-Ansatz: Es funktioniert möglicherweise nicht wie erwartet, wenn sich die Einfügemarke nicht am Ende des Werts befindet. Wenn Sie beispielsweise den Wert „1234“ in das Eingabefeld eingeben, dann die Einfügemarke wieder an den Anfang des Werts bewegen und „5“ eingeben, erhalten Sie am Ende den Wert „5123“. Dies unterscheidet sich von einem input type=”text”-Feld mit einer maximalen Länge von 4, bei dem der Browser Sie kein fünftes Zeichen in das “full”-Feld eingeben lässt und der Wert “1234” bleiben würde.

    – Jon Schneider

    9. August 2013 um 13:08 Uhr

  • @Andy, Offensichtlich sucht die Frage nach einem Nicht-JS-Weg maxlength………….

    – Schrittmacher

    26. Januar 2015 um 13:29 Uhr


  • @ Pacerier: Hat etwas in meiner Antwort impliziert, dass ich anders gedacht habe? Wie Sie sehen können, habe ich die nächstmögliche Lösung angeboten, die nur mit HTML erreicht werden kann, zusammen mit einem zusätzlichen Vorschlag, der JavaScript verwendet, wo das OP möglicherweise verhindern wollte, dass der Benutzer mehr Zeichen als erlaubt eingibt.

    – Andi E

    26. Januar 2015 um 16:43 Uhr

Wie kann ich die maximale Lange in einem HTML5 Element input
Duane

Wenn Sie nach einem suchen Mobiles Web Lösung, bei der Sie möchten, dass Ihr Benutzer einen Nummernblock statt einer Volltexttastatur sieht. Verwenden Sie type=”tel”. Es funktioniert mit maxlength, was Ihnen das Erstellen von zusätzlichem Javascript erspart.

Max und Min erlauben dem Benutzer weiterhin, Zahlen über Max und Min einzugeben, was nicht optimal ist.

  • Ich habe festgestellt, dass dies nicht die beste Lösung für die numerische Eingabe ist, da eine „tel“-Eingabe zusätzliche Symbole zulässt und neben jeder Zahl Buchstaben anzeigt. Die rein numerische Tastatur sieht deutlich aufgeräumter aus.

    – Habichtharris

    25. Juli 2014 um 18:31 Uhr

  • @hawkharris Sie haben Recht, type=”number” ist die sauberere Benutzeroberfläche. Es ist einfacher, versehentlich ein falsches Zeichen einzugeben. Daher ist eine zusätzliche Validierung erforderlich, um sicherzustellen, dass der Benutzer keine fehlerhaften Daten eingibt. Bedenken Sie aber auch, dass der Benutzer genauso gut alle Dezimalstellen mit einer Zahlentastatur eingeben könnte. Außerdem löst es die obige Frage nicht ohne zusätzliches JavaScript.

    – Duane

    25. Juli 2014 um 19:51 Uhr


  • bei Verwendung mit pattern=”[0-9]*” werden die zusätzlichen Symbole deaktiviert

    – Aperitif

    18. September 2018 um 15:33 Uhr

  • Aber der Tel-Typ wird von Hilfstechnologien gelesen, sodass der Benutzer denken muss, dass er eine Telefonnummer eingeben muss. Das ist schlimmer als die Verwendung des Standardtexttyps …

    – Kapsel

    18. Februar 2019 um 4:17 Uhr

  • Dies ist eine der besten Zusammenfassungen benutzerfreundlicher numerischer Eingabemodi: css-tricks.com/finger-friendly-numerical-inputs-with-inputmode Um Ihnen einen Klick zu ersparen, deckt dieser HTML-Code viele Bereiche ab und unterstützt viele Browser: <input type="number" inputMode="numeric" pattern="[0-9]*" min="1" max="2112"> Dann können Sie dies bei Bedarf mit etwas JavaScript verbessern 🙃

    – spjpgrd

    20. Juni 2019 um 16:15 Uhr


1646310136 991 Wie kann ich die maximale Lange in einem HTML5 Element input
David Refoua

All dies können Sie 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>

Aktualisieren:

Möglicherweise möchten Sie auch verhindern, dass nicht numerische Zeichen eingegeben werden, da object.length wäre ein leerer String für die Zahleneingaben, und daher wäre seine Länge 0. Und so kam es dass der maxLengthCheck Funktion geht nicht.

Lösung:

Siehe this oder this für Beispiele.

Demo – Die vollständige Version des Codes finden Sie hier:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

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

Aktualisierung 3:
Bitte beachten Sie, dass die Eingabe von mehr als einem Dezimalpunkt den Zahlenwert durcheinander bringen kann.

Oder wenn Ihr Maximalwert zum Beispiel 99 und Minimum 0 ist, können Sie dies zum 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 Eingabe wirklich eine Nummer ist

  • … Toll, aber du brauchst kein Min und Max mehr, Alter. (nur gesagt)

    – xoxel

    30. September 2016 um 13:04 Uhr


  • @xoxel tun Sie, wenn Sie möchten, dass die Warnmeldung weiterhin angezeigt wird

    – DNKROZ

    24. Juli 2017 um 9:57 Uhr

  • der Verallgemeinerung willen würde ich tun onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"

    – Oriadam

    1. März 2020 um 8:27 Uhr

  • Dies ist die beste Antwort, aber ich schlage vor, onChange anstelle von keyUp zu verwenden, da es beim Tippen zu aggressiv ist.

    – Omiod

    18. Februar 2021 um 14:37 Uhr

1646310137 158 Wie kann ich die maximale Lange in einem HTML5 Element input
Brad Allred

Es ist sehr einfach, mit etwas Javascript können Sie eine simulieren maxlengthHör zu:

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

  • … Toll, aber du brauchst kein Min und Max mehr, Alter. (nur gesagt)

    – xoxel

    30. September 2016 um 13:04 Uhr


  • @xoxel tun Sie, wenn Sie möchten, dass die Warnmeldung weiterhin angezeigt wird

    – DNKROZ

    24. Juli 2017 um 9:57 Uhr

  • der Verallgemeinerung willen würde ich tun onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"

    – Oriadam

    1. März 2020 um 8:27 Uhr

  • Dies ist die beste Antwort, aber ich schlage vor, onChange anstelle von keyUp zu verwenden, da es beim Tippen zu aggressiv ist.

    – Omiod

    18. Februar 2021 um 14:37 Uhr

1646310138 851 Wie kann ich die maximale Lange in einem HTML5 Element input
Chris Panayotoff

Sie können es als Text angeben, aber fügen Sie Pettern hinzu, 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 Zahlentastatur.

  • Das Musterattribut wird in IE9 und früheren Versionen nicht unterstützt und wird teilweise in Safari unterstützt: caniuse.com/#feat=Eingabemuster

    – Diazdeteran

    9. Oktober 2015 um 3:02 Uhr


  • Ja, danke für den Hinweis, aber wir haben die IE9-Unterstützung eingestellt (den Senf davon abschneiden), und ich bevorzuge sie gegenüber JS-Methoden. Hängt vom Projekt ab.

    – Chris Panayotoff

    9. Oktober 2015 um 8:18 Uhr

  • Ein Benutzer wird damit nicht daran gehindert, nicht numerische Zeichen einzugeben. Sie können 2 beliebige Zeichen eingeben. Die pattern bewirkt nur eine Validierungshervorhebung.

    – brt

    4. Oktober 2018 um 16:34 Uhr

  • Getestet auf Android 9 (Nokia 8), aber ich bekomme die normale Tastatur 🙁 Irgendwelche Ideen?

    – Oriadam

    1. März 2020 um 9:55 Uhr

923320cookie-checkWie kann ich die maximale Länge in einem HTML5-Element “input type=number” festlegen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy