MaskedTextBoxModel

23 Sep 20255 minutes to read

Interface for a class MaskedTextBox

Properties

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.

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.

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.

<ejs-maskedtextbox [mask]="mask" [customCharacters]="customCharacters"></ejs-maskedtextbox>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() { }
  public mask = "99 : 99 PM";
  public customCharacters = { P: 'P,A,p,a', M: 'M,m' };
}

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.

enableRtl boolean

Enable or disable rendering component in right to left direction.

enabled boolean

Sets a value that enables or disables the MaskedTextBox component.

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.

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.

<ejs-maskedtextbox [htmlAttributes]="htmlAttributes" [mask]="mask" [value]="value"></ejs-maskedtextbox>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() { }
  public htmlAttributes = { name: "phonenumber", tabindex: "-1", readonly:"readonly" };
  public mask = "000-000";
  public value = "6000021";
}

locale string

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

mask string

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

• Mask allows standard mask elements
  </b>, custom characters and
  regular expression as mask
  elements.
  For more information on mask, refer to
  mask.
• If the mask value is empty, the MaskedTextBox will behave as an input element with text type.

<ejs-maskedtextbox [mask]="mask"></ejs-maskedtextbox>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() { }
  public mask = "####.##";
}

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.

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.

readonly boolean

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

showClearButton boolean

Specifies whether to show or hide the clear icon.

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.

<ejs-maskedtextbox [mask]="mask" [value]="value" ></ejs-maskedtextbox>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() { }
  public mask = "(999) 9999-999";
  public value = "8674321756";
}

width number|string

Sets the width of the MaskedTextBox.