Class SfMaskedTextBox

The MaskedTextBox is an input element that allows to get input from the user.

Inheritance

System.Object

SfBaseComponent

SfMaskedTextBox

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnAfterRenderAsync(Boolean)

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfMaskedTextBox : SfBaseComponent, IInputBase

Constructors

SfMaskedTextBox()

Declaration

public SfMaskedTextBox()

Properties

Blur

Gets or sets the event callback that will be invoked when the SfMaskedTextBox loses focus.

Declaration

public EventCallback<MaskBlurEventArgs> Blur { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<MaskBlurEventArgs>

Created

Gets or sets the event callback that will be invoked when the SfMaskedTextBox component is created.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event callback function.

CssClass

Gets or sets a CSS class string to customize the appearance of the component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to customize the appearance. The default value is String.Empty.

CustomCharacters

Gets or sets a collection of custom characters that can be used for non-mask elements(literals).

Declaration

public Dictionary<string, string> CustomCharacters { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.String>	A dictionary value of custom characters.

Remarks

The CustomCharacters property allows you to define additional special characters that can be used in the mask pattern. For example non-mask elements "P" accepts values "P" , "A" , "p" , "a" and "M" accepts values "M", "m" mentioned in the custom characters collection.

Examples

<SfMaskedTextBox Mask="00:00 >PM" CustomCharacters="@customMask">
</SfMaskedTextBox>
@code{
    private Dictionary<string, string> customMask = new Dictionary<string, string>()
    {
        {"P" , "P,p,A,a" },
        {"M" , "m,M" }
    }
}

Destroyed

Gets or sets the event callback that will be invoked when the SfMaskedTextBox component is destroyed.

Declaration

public EventCallback<object> Destroyed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event callback function.

Enabled

Gets or sets a value that indicates whether to enable or disable the SfMaskedTextBox component.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	true, allow the user to interact with component. Otherwise, false. The default value is true.

EnableLiterals

Gets or sets a value indicating whether literals are enabled in the masked text box.

Declaration

public bool EnableLiterals { get; set; }

Property Value

Type	Description
System.Boolean	true if literals are include in the Value; otherwise, false.

Remarks

When literals are enabled, the mask pattern can include literal characters in the Value property. You can get the masked value using GetMaskedValue() method also.

EnablePersistence

Gets or sets whether to persist component's state between page reloads. When set to true, the Value property is persisted.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, if the component's state persistence is enabled. The default value is false.

Remarks

Component's Value property will be stored in browser local storage to persist component's state when page reloads.

EnableRtl

Gets or sets whether the right-to-left direction is enabled or not for the component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, if the right to left direction can be enabled for the component. Otherwise. false. The default value is false.

FloatLabelType

Gets or sets the floating label behavior of the SfMaskedTextBox. The Placeholder text act as a lable.

Declaration

public FloatLabelType FloatLabelType { get; set; }

Property Value

Type	Description
FloatLabelType	One of the FloatLabelType enumeration. The default value is Never

Remarks

If the FloatLabelType is Never, the placeholder text does not float as a label. If the FloatLabelType is Auto, the placeholder text will float above the SfMaskedTextBox component as a label after focusing it. If the FloatLabelType is Always, the placeholder text is displayed as a label above the SfMaskedTextBox component.

Examples

In the following code example, set the float lable as Auto.

  <SfMaskedTextBox Placeholder="Enter phone number" FloatLabelType="FloatLabelType.Auto" Mask="(999) 000-0000">
  </SfMaskedTextBox>

Focus

Gets or sets the event callback that will be invoked when the SfMaskedTextBox gets focus.

Declaration

public EventCallback<MaskFocusEventArgs> Focus { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<MaskFocusEventArgs>

HtmlAttributes

Gets or sets a collection of additional attributes such as styles, class, and more that will be applied to the SfMaskedTextBox component.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	The value as dictionary collection.The default value is null

Remarks

If you configured both property and equivalent html attributes, then the component considers the property value.

Examples

<SfMaskedTextBox HtmlAttributes="@CustomAttribute" Mask="(999) 000-0000">
</SfMaskedTextBox>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "title", "Please enter the phone number" }
    };
}

ID

Gets or sets the ID of the component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string representing the identifier of the component.

Remarks

The ID property allows you to uniquely identify the component in the rendered HTML markup. If you don't set a custom ID, the component's ID will be auto-generated, and it may not be as descriptive as you require.

InputAttributes

Gets or sets a collection of additional inputs attributes such as disabled, value, and more that will be applied to the TextBox component.

Declaration

public Dictionary<string, object> InputAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	The value as dictionary collection.The default value is null

Remarks

Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive. If you configured both property and equivalent html attributes, then the component considers the property value.

Examples

<SfMaskedTextBox @attributes="@CustomAttribute" Mask="(999) 000-0000">
</SfMaskedTextBox>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "type", "tel" }
    };
}

Mask

Gets or sets the mask pattern for the text input.

Declaration

public string Mask { get; set; }

Property Value

Type	Description
System.String	A string representing the mask pattern.

Remarks

The Mask property defines the pattern that the user's input must follow. It can include various special characters that define the allowed input format. For example, # might represent a digit and _ might represent an optional character. Literal characters included in the mask will be displayed as part of the mask.

Examples

<SfMaskedTextBox Mask="(999) 000-0000">
</SfMaskedTextBox>

Placeholder

Gets or sets the text that is displayed when the SfMaskedTextBox has no value and remove on the focus.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	The text that is displayed when the MaskedTextBox has no value. The default value is String.Empty.

Remarks

The property depends on the FloatLabelType property, The placeholder text acts as a label.

PromptChar

Gets or sets the character used as a placeholder in the masked text box for unfilled positions.

Declaration

public char PromptChar { get; set; }

Property Value

Type	Description
System.Char	The character that indicates an unfilled position in the mask. The default value is _.

Remarks

The PromptChar is used to visually indicate the available input positions in the mask that the user can fill.

PromptPlaceholder

Gets or set character that is replace the blank spaces in the Value property.

Declaration

public Nullable<char> PromptPlaceholder { get; set; }

Property Value

Type	Description
System.Nullable<System.Char>	Accepts the character value is used to replace the blank space. The default value is a space.

Remarks

You can use this option when you enable the EnableLiterals property: Otherwise, this option will not work.

Examples

<SfMaskedTextBox Mask="(999) 000-0000" EnableLiterals=true @bind-Value="@maskValue" PromptPlaceholder='@PlaceholderChar'>
</SfMaskedTextBox>
<p>Mask Value - @maskValue</p>
@code{
    private char PlaceholderChar = '*';
    private string maskValue{ get; set; }
}

Readonly

Gets or sets the boolean value whether the SfMaskedTextBox allows the user to change the text.

Declaration

public bool Readonly { get; set; }

Property Value

Type	Description
System.Boolean	true, if the TextBox component cannot be edited. Otherwise, false.

SfMaskedTextBoxEditContext

Specifies the edit context of MaskedTextBox component.

Declaration

protected EditContext SfMaskedTextBoxEditContext { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.Forms.EditContext

ShowClearButton

Get or sets a value that indicates whether the clear button is displayed in SfMaskedTextBox component.

Declaration

public bool ShowClearButton { get; set; }

Property Value

Type	Description
System.Boolean	true, if the clear button should be shown. Otherwise, false.The default is false.

TabIndex

Gets or sets the tab order of the SfMaskedTextBox component.

Declaration

public int TabIndex { get; set; }

Property Value

Type	Description
System.Int32	An integer value representing the tab index of the component.

Value

Gets or sets the current value of the masked text box.

Declaration

public string Value { get; set; }

Property Value

Type	Description
System.String	The input value of the masked text box.

Remarks

The Value property holds the current text entered into the masked text box. If EnableLiterals is set to true, literal characters included in the mask pattern will also be part of the Value. Otherwise, only the user-entered characters will be part of the Value.

Examples

<SfMaskedTextBox Mask="(999) 000-0000" EnableLiterals=true @bind-Value="@maskValue">
</SfMaskedTextBox>
<p>Mask Value - @maskValue</p>
@code{
    private string maskValue{ get; set; }
}

ValueChange

Gets or sets the event callback that will be invoked when the content of SfMaskedTextBox has changed.

Declaration

public EventCallback<MaskChangeEventArgs> ValueChange { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<MaskChangeEventArgs>

Examples

<SfMaskedTextBox Mask="(999) 000-0000" ValueChange="@OnChange">
</SfMaskedTextBox>
@code{
    private void OnChange(MaskChangeEventArgs args)
    {
        var TextValue = args.Value;
    }
}

ValueChanged

Gets or sets the callback to trigger when the value changes.

Declaration

public EventCallback<string> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An event callback function.

Width

Gets or sets the width of the SfMaskedTextBox component.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	The preferred width in pixels or percentage value. The default value is 100%.

Examples

  <SfMaskedTextBox @attributes="@CustomAttribute" Mask="(999) 000-0000">
  </SfMaskedTextBox>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

FocusAsync()

Sets the focus to SfMaskedTextBox component for interaction.

Declaration

public Task FocusAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Task.

FocusOutAsync()

Remove the focus from SfMaskedTextBox component, if the component is in focus state.

Declaration

public Task FocusOutAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Task.

GetMaskedValue()

Gets the value of SfMaskedTextBox with respective mask.

Declaration

public string GetMaskedValue()

Returns

Type	Description
System.String	The value with mask literals.

GetPersistDataAsync()

Gets the properties to be maintained in the persisted state.

Declaration

public Task<string> GetPersistDataAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.String>	Task.