Telefonnummern, Codes und Kennungen lassen sich leichter tippen, wenn das Feld führt. MaskedInput formatiert die Eingabe nach einer Maske, mit fertigen Vorgaben für gängige Fälle.
Warum es hilft
- Geführte Eingabe nach Maske
- Fertige Vorgaben
- Weniger Formatierungsfehler
Wo es passt
- Telefon und Postleitzahlen
- Produkt- oder Lizenzschlüssel
- Identifikationsnummern
Beispiel
<MaskedInput @bind-Value="_phone" Label="Phone" Mask="+359 00 000 0000" HelperText="Digits only; the separators are added while you type." />
<MaskedInput @bind-Value="_plate" Label="Plate number (raw value)" Mask="aa 0000 aa" ReturnRaw="true" />
<MaskedInput @bind-Value="_card" Label="Card number (Luhn checked)" Preset="MaskPreset.CreditCard" />
<MaskedInput @bind-Value="_postcode" Label="Postcode" Mask="0000" Pattern="^[1-9]" PatternMessage="A postcode does not start with 0." />
<p>Phone: @(_phone ?? "-"), plate: @(_plate ?? "-")</p>
@code {
private string? _phone;
private string? _plate;
private string? _card;
private string? _postcode;
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.