MaskedTextBox

23 Sep 20257 minutes to read

The MaskedTextBox allows the user to enter the valid input only based on the provided mask.

<input id="mask" type="text" />
<script>
var maskObj = new MaskedTextBox({ mask: "(999) 9999-999" });
maskObj.appendTo('#mask');
</script>

Properties

cssClass string

Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the
complete UI styles for the MaskedTextBox component.

Defaults to null

customCharacters { : }

Sets the collection of values to be mapped for non-mask elements(literals)
which have been set in the mask of MaskedTextBox.
In the below example, non-mask elements “P” accepts values
“P” , “A” , “p” , “a” and “M” accepts values “M”, “m” mentioned in the custom characters collection.

For more information on customCharacters, refer to
customCharacters.

<input id="mask" type="text" />
import { MaskedTextBox } from '@syncfusion/ej2-inputs';

let customChar = { P: 'P,A,p,a', M: 'M,m' };
let maskObj = new MaskedTextBox({ 
  mask: "99 : 99 PM", 
  customCharacters: customChar 
});
maskObj.appendTo('#mask');

Defaults to null

enablePersistence boolean

Sets a value that enables or disables the persisting state of the MaskedTextBox after reloading the page.
If enabled, the ‘value’ state will be persisted.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled boolean

Sets a value that enables or disables the MaskedTextBox component.

Defaults to true

floatLabelType FloatLabelType

The placeholder acts as a label
and floats above the MaskedTextBox based on the below values.
Possible values are:

  • Never - The floating label will not be enable when the placeholder is available.
  • Always - The floating label always floats above the MaskedTextBox.
  • Auto - The floating label floats above the MaskedTextBox after focusing it or when enters the value in it.

Defaults to Never

htmlAttributes { : }

You can add the additional html attributes such as disabled, value etc., to the element.
If you configured both property and equivalent html attribute then the component considers the property value.

<input id="mask" type="text" />
import { MaskedTextBox } from '@syncfusion/ej2-inputs';

let mask: MaskedTextBox = new MaskedTextBox({
    mask: '000-000',
    value:'6000021',
    htmlAttributes: {name: "phonenumber", tabindex: "-1", readonly:"readonly" }
});
mask.appendTo('#mask');

Defaults to {}

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

mask string

Sets a value that masks the MaskedTextBox to allow/validate the user input.

<input id="mask" type="text" />
import { MaskedTextBox } from '@syncfusion/ej2-inputs';

let mask: MaskedTextBox = new MaskedTextBox({
  mask:"####.##"
});
mask.appendTo('#mask');

Defaults to null

placeholder string

Gets or sets the string shown as a hint/placeholder when the MaskedTextBox is empty.
It acts as a label and floats above the MaskedTextBox based on the
floatLabelType.

Defaults to null

promptChar string

Gets or sets a value that will be shown as a prompting symbol for the masked value.
The symbol used to show input positions in the MaskedTextBox.
For more information on prompt-character, refer to
prompt-character.

Defaults to ‘_’

readonly boolean

Specifies the boolean value whether the Masked TextBox allows the user to change the text.

Defaults to false

showClearButton boolean

Specifies whether to show or hide the clear icon.

Defaults to false

value string

Gets or sets the value of the MaskedTextBox. It is a raw value of the MaskedTextBox excluding literals
and prompt characters. By using getMaskedValue property, you can get the value of MaskedTextBox with the masked format.

<input id="mask" type="text" />
import { MaskedTextBox } from '@syncfusion/ej2-inputs';

let mask: MaskedTextBox = new MaskedTextBox({
  mask:"(999) 9999-999",
  value: "8674321756"
});
mask.appendTo('#mask');

Defaults to null

width number|string

Sets the width of the MaskedTextBox.

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers.
Also it maintains the initial input element from the DOM.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

focusIn

Sets the focus to widget for interaction.

Returns void

focusOut

Remove the focus from widget, if the widget is in focus state.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getMaskedValue

Gets the value of the MaskedTextBox with the masked format.
By using value property, you can get the raw value of maskedtextbox without literals and prompt characters.

Returns string

getPersistData

Gets the properties to be maintained in the persisted state.

Returns string

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

blur EmitType<MaskBlurEventArgs>

Triggers when the MaskedTextBox got focus out.

change EmitType<MaskChangeEventArgs>

Triggers when the value of the MaskedTextBox changes.

created EmitType<Object>

Triggers when the MaskedTextBox component is created.

destroyed EmitType<Object>

Triggers when the MaskedTextBox component is destroyed.

focus EmitType<MaskFocusEventArgs>

Triggers when the MaskedTextBox got focus in.