HTML-Attribut: minlength
Das minlength-Attribut definiert die minimale Zeichenlänge, die der Benutzer in ein <input>- oder <textarea>-Feld 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 übergeben wird, gibt es keine Mindestlänge für die Eingabe. Dieser Wert muss kleiner oder gleich dem Wert von maxlength sein, da sonst der Wert niemals gültig sein kann, da es unmöglich ist, beide Kriterien zu erfüllen.
Die Eingabe schlägt in der Constraint-Validierung fehl, wenn die Länge des Textwerts des Feldes kürzer als die Anzahl der minlength-UTF-16-Code-Einheiten ist, wobei validityState.tooShort true zurückgibt. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Sobald die Ü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 verstößt nur gegen eine minlength-Einschränkung, wenn der Benutzer einen Wert eingegeben hat. Ist eine Eingabe nicht required, kann ein leerer String übermittelt werden, auch wenn minlength festgelegt ist.
Probieren Sie es aus
<label for="name">Product name:</label>
<input
id="name"
name="name"
type="text"
value="Shampoo"
minlength="3"
maxlength="20"
required />
<label for="description">Product description:</label>
<textarea
id="description"
name="description"
minlength="10"
maxlength="40"
required></textarea>
label {
display: block;
margin-top: 1em;
}
input:valid,
textarea:valid {
background-color: palegreen;
}
Beispiele
Durch das Hinzufügen von minlength="5" muss der Wert entweder leer oder fünf Zeichen oder länger sein, 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 is valid.
input {
border: 2px solid currentcolor;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:focus {
background-image: linear-gradient(pink, lightgreen);
}
Spezifikationen
| Specification |
|---|
| HTML # attr-input-minlength |
| HTML # attr-textarea-minlength |