Regular Expression Mask:
The Masked Input component is a text editor that supports the following mask types:
- Regular Expression
For more information on a specific mask type, refer to the corresponding section below.
The Masked Input component also allows you to enable client-side (WebAssembly) masks in Blazor Server applications. In this mode, the editor processes input text on the client to reduce input delays when you have a slow connection. For more information on how to activate the mode and its basic principles, refer to the following section: Optimize Mask Performance in Blazor Server Apps.
Demo card headers display drop-down lists on the right-hand side. Use these controls to apply different size modes to editors. To do the same in code, use the SizeMode property.
You can use the Text mask type when you want to enter strings of limited length, such as phone numbers, zip codes, social security numbers, and so on. Some characters in the mask string serve as placeholders for digits or letters, while others are literals used to separate value sections.
The Placeholder сombobox and Save Literals radio button specify the placeholder character and whether to save literals to the editor's value, respectively.
Use the Numeric mask type when you want to restrict input to numeric values. You can use predefined mask patterns or standard numeric .NET formats to specify the mask. Note that display values depend on the current culture. For example, the same input mask may define different settings for the U.S. and Germany ( currency symbol, thousand separator, precision, and so on).
Masked Input activates the numeric mask type if you bind the component's Value property to a numeric object. To enable this mask type in other cases, set the component's MaskMode property to MaskMode.Numeric.
The Mask combobox and Culture radio button specify the mask pattern and current culture, respectively.
Date: 8/12/2022 12:00:00 AM
The Date-Time mask type allows users to enter date and/or time values. You can use predefined mask patterns or standard date and time .NET formats to specify the mask. Note that display values depend on the current culture.
Masked Input activates the date-time mask type if you bind the component's Value property to a DateTime object. To enable this mask type in other scenarios, set the MaskMode parameter to MaskMode.DateTime.
The Mask, Caret Mode, and Culture settings specify additional mask properties.
To apply this mask type to the Masked Input, set the component's MaskMode property to MaskMode.RegEx.
The Autocomplete Mode, Placeholder, and Show Placeholders settings specify additional mask properties.
In this demo, the Masked Input displays values but does not allow users to change them. To implement this behavior, use any of the following modes: