Blazor UI Components - Masked Input (available in v21.1)

Our most recent release (v21.1) includes a new Masked Input data editor. As you might expect, this new Blazor UI element allows you to control data input and force users to enter data values that conform to specific standards. Our Masked Input supports the following mask types.

Text Mask

The text mask type allows users to enter alphabetic, numeric, or alphanumeric characters at specific positions. This mask can be used for things such as phone numbers, zip codes, and social security numbers.

You can use a DxTextMaskProperties component inside the Masked Input's markup to specify additional settings for this mask type:

• Placeholder - The character used as a placeholder in a masked editor.
• SaveLiteral - Specified whether Masked Input should include literals for an editor’s value.

<DxMaskedInput @bind-Value="@Phone" Mask="(999)000-0000">
  <DxTextMaskProperties Placeholder="@('\*')" SaveLiterals=false />
</DxMaskedInput>

Numeric Mask

The Numeric Mask mask type allows users to enter numeric values (integers, float, currency, percentage, etc.). This mask type supports the standard numeric .NET format.

<DxMaskedInput @bind-Value="@Price" Mask="C" />

Date Time Mask

The Date Time Mask type allows users to enter a date and/or time values using the standard .NET date and time format. You can use DxDateTimeMaskProperties to define caret behavior via the CaretMode property:

<DxMaskedInput @bind-Value="@Date" Mask="d">
  <DxDateTimeMaskProperties CaretMode="MaskCaretMode.Advanced" />
</DxMaskedInput>

Regular Expression and Custom Mask

Regular Expression and Custom Mask types allow you to specify a custom text pattern. The syntax is similar to the POSIX ERE specification.

Use DxRegExMaskProperties component to specify the following settings:

• MaskAutoCompleteMode - Autocompletion mode used by the editor.
• Placeholder - The character used as the placeholder in a masked editor.
• PlaceholdersVisible - Specifies whether the editor should show/hide placeholders in a masked editor.

<DxMaskedInput @bind-Value="@Email" MaskMode="MaskMode.RegEx"
 Mask="(\w|[.-])+@(\w|-)+\.(\w|-){2,4}">
  <DxRegExMaskProperties PlaceholdersVisible=false />
</DxMaskedInput>

Note: You can use the Culture to specify culture settings used by masks. This property is applied for all mask types.

<DxMaskedInput @bind-Value="@Price" Mask="C">
  <DxNumericMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")" />
</DxMaskedInput>

Additionally, like other DevExpress Blazor Data Editors, Masked Input ships with the following core functionality:

• Display format - Use the DisplayFormat property to format the display value when the editor is not focused.
• Prompt text - Use the NullText property to specify the text editor’s placeholder text when the editor’s value is null.
• Clear button - Use the ClearButtonDisplayMode property to display a Clear button with the control (Clear removes all content within the Masked Input).
• Read-only and disabled modes.

Free DevExpress Products - Get Your Copy Today