Telefoonnummers, codes en id's typ je makkelijker wanneer het veld je begeleidt. MaskedInput maakt wat de gebruiker typt op volgens een masker, met kant-en-klare voorinstellingen voor veelvoorkomende gevallen.
Waarom het helpt
- Begeleid typen met een masker
- Kant-en-klare voorinstellingen
- Minder opmaakfouten
Waar het past
- Telefoonnummers en postcodes
- Product- of licentiesleutels
- Identificatienummers
Voorbeeld
<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;
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.