HTML-Attribut: minlength
Das minlength
-Attribut definiert die minimale Zeichenlänge, die der Nutzer in ein <input>
oder <textarea>
eingeben kann. Das Attribut muss einen ganzzahligen Wert von 0 oder höher haben.
Die Länge wird in UTF-16-Code-Einheiten gemessen, was (für die meisten Schriften) der Anzahl der Zeichen entspricht. Wenn kein minlength
angegeben ist oder ein ungültiger Wert angegeben wird, hat die Eingabe keine Mindestlänge. Dieser Wert muss kleiner oder gleich dem Wert von maxlength sein, da es sonst unmöglich ist, beide Kriterien zu erfüllen.
Die Eingabe wird bei der Überprüfung der Eingaberichtlinien fehlschlagen, wenn die Länge des Textwertes des Feldes weniger als minlength UTF-16-Code-Einheiten beträgt, wobei validityState.tooShort
true
zurückgibt. Die Eingaberichtlinien werden nur angewendet, wenn der Wert vom Nutzer geändert wird. Sobald eine Übermittlung fehlschlägt, zeigen einige Browser eine Fehlermeldung an, die die erforderliche Mindestlänge und die aktuelle Länge angibt.
minlength
impliziert nicht required
; eine Eingabe verletzt nur eine minlength
-Einschränkung, wenn der Benutzer einen Wert eingegeben hat. Wenn eine Eingabe nicht required
ist, kann eine leere Zeichenfolge gesendet werden, selbst wenn minlength
gesetzt ist.
Probieren Sie es aus
Beispiele
Durch Hinzufügen von minlength="5"
muss der Wert entweder leer sein oder fünf Zeichen oder länger, um gültig zu sein.
<label for="fruit">Enter a fruit name that is at least 5 letters long</label>
<input type="text" minlength="5" id="fruit" />
Wir können Pseudoklassen verwenden, um das Element basierend darauf zu stylen, ob der Wert gültig ist. Der Wert ist gültig, solange er entweder null (leer) oder fünf oder mehr Zeichen lang ist. Lime ist ungültig, lemon ist gültig.
input {
border: 2px solid currentcolor;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:focus {
background-image: linear-gradient(pink, lightgreen);
}
Spezifikationen
Specification |
---|
HTML Standard # attr-input-minlength |
HTML Standard # attr-textarea-minlength |
Browser-Kompatibilität
html.elements.input.minlength
BCD tables only load in the browser
html.elements.textarea.minlength
BCD tables only load in the browser