Numéros de téléphone, codes et identifiants se saisissent mieux quand le champ guide. MaskedInput met en forme la saisie selon un masque, avec des préréglages pour les cas courants.
Pourquoi c’est utile
- Saisie guidée par un masque
- Préréglages prêts à l’emploi
- Moins d’erreurs de format
Où il trouve sa place
- Téléphones et codes postaux
- Clés de produit ou de licence
- Numéros d’identification
Exemple
<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;
}Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.