ejMaskEdit
26 Oct 201724 minutes to read
The MaskEdit control provides an easy and reliable way of collecting user input and displaying standard data in a specific format. Some common uses of the MaskEdit control are IP address editors, phone number editors, and Social Security number editors.
Example
<input id="maskedit" ej-maskedit/>
export class AppComponent {
constructor(){
}
}
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.cultures.min.js
-
module:ej.maskedit.js
Members
cssClass string
Specify the cssClass to achieve custom theme.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [cssClass]="cssClass"/>
export class AppComponent {
cssClass: string;
maskFormat:string;
constructor(){
this.cssClass = 'gradient-lime';
this.maskFormat ='99-9999';
}
}
customCharacter string
Specify the custom character allowed to entered in mask edit textbox control.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [customCharacter]="customCharacter"/>
export class AppComponent {
customCharacter: string;
maskFormat:string;
constructor(){
this.cssClass = '#';
this.maskFormat ='C-99-9999';
}
}
enabled boolean
Specify the state of the mask edit textbox control.
Default Value
- true
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [enabled]="enabled"/>
export class AppComponent {
enabled: boolean;
maskFormat:string;
constructor(){
this.enabled = true;
this.maskFormat ='99-9999';
}
}
enablePersistence boolean
Specify the enablePersistence to mask edit textbox to save current model value to browser cookies for state maintains.
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [enablePersistence]="enablePersistence"/>
export class AppComponent {
enablePersistence: boolean;
constructor(){
this.enablePersistence = true;
}
}
height string
Specifies the height for the mask edit textbox control.
Default Value
- 28 px
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [height]="height"/>
export class AppComponent {
height: '28px';
maskFormat:string;
constructor(){
this.height = '28px';
this.maskFormat ='99-9999';
}
}
hidePromptOnLeave boolean
Specifies whether hide the prompt characters with spaces on blur. Prompt chars will be shown again on focus the textbox.
Default Value
- false
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [hidePromptOnLeave]="hidePromptOnLeave"/>
export class AppComponent {
hidePromptOnLeave: boolean;
maskFormat:string;
constructor(){
this.hidePromptOnLeave = true;
this.maskFormat ='99-9999';
}
}
htmlAttributes object
Specifies the list of HTML attributes to be added to mask edit textbox.
Default Value
- {}
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [htmlAttributes]="htmlAttributes"/>
export class AppComponent {
htmlAttributes: Object;
maskFormat:string;
constructor(){
this.htmlAttributes = { name:"maskTextBox" };
this.maskFormat ='99-9999';
}
}
inputMode enum
Specify the inputMode for mask edit textbox control. See InputMode
Name | Type | Default | Description |
---|---|---|---|
Password | string | password | Used to set InputMode as Password |
Text | string | text | Used to set InputMode as Text |
Default Value
- ej.InputMode.Text
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [inputMode]="inputMode"/>
export class AppComponent {
inputMode: any;
maskFormat:string;
constructor(){
this.inputMode = ej.InputMode.Password;
this.maskFormat ='99-9999';
}
}
locale string
Defines the localization culture for MaskEdit.
Default Value
- en-US
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [locale]="locale"/>
export class AppComponent {
locale: string;
maskFormat:string;
constructor(){
this.locale = 'de-DE';
this.maskFormat ='$99,999.99';
}
}
maskFormat string
Specifies the input mask.
Default Value
- null
Available Mask Formats
Formats | Description |
---|---|
[0-9] | Allows the value between 0 to 9 |
a | Allows the values between a to z, A to Z, 0 to 9 and space |
A | Allows the values between a to z, A to Z and 0 to 9 |
N | Allows the values between 0 to 9 only |
# | Allows the values between 0 to 9 only |
& | Allows the values between a to Z, A to Z, 0 to 9 and special characters |
< | Converts all characters that follow to lowercase. |
> | Converts all characters that follow to Uppercase. |
C | Allows only the character given in customCharacter API |
? | Allows only the values between a to z and A to Z |
$ | Currency symbol value will be changed based on the corresponding culture. |
. | Decimal Separator value will be changed based on the corresponding culture |
, | Thousand Separator will be changed based on the corresponding culture |
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat"/>
export class AppComponent {
maskFormat:string;
constructor(){
this.maskFormat ='99-9999';
}
}
name string
Specifies the name attribute value for the mask edit textbox.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [name]="name"/>
export class AppComponent {
name:string;
maskFormat:string;
constructor(){
this.name='insurance_number';
this.maskFormat ='99-9999';
}
}
readOnly boolean
Toggles the readonly state of the mask edit textbox. When the mask edit textbox is readonly, it doesn’t allow your input.
Default Value
- false
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [readOnly]="readOnly"/>
export class AppComponent {
readOnly:boolean;
maskFormat:string;
constructor(){
this.readOnly = true;
this.maskFormat ='99-9999';
}
}
showError boolean
Specifies whether the error will show until correct value entered in the mask edit textbox control.
Default Value
- false
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [showError]="showError"/>
export class AppComponent {
showError:boolean;
maskFormat:string;
constructor(){
this.showError = true;
this.maskFormat ='99-9999';
}
}
### showPromptChar boolean
when showPromptChar is true, the hide the prompt characters are shown in focus of the control and hides in focus out of the control.
Default Value
- true
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [showPromptChar]="showPromptChar"/>
export class AppComponent {
showPromptChar:boolean;
maskFormat:string;
constructor(){
this.showPromptChar = false;
this.maskFormat ='99-9999';
}
}
showRoundedCorner boolean
MaskEdit input is displayed in rounded corner style when this property is set to true.
Default Value
- false
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [showRoundedCorner]="showRoundedCorner"/>
export class AppComponent {
showRoundedCorner:boolean;
maskFormat:string;
constructor(){
this.showRoundedCorner = true;
this.maskFormat ='99-9999';
}
}
textAlign enum
Specify the text alignment for mask edit textbox control.See TextAlign
Name | Type | Default | Description |
---|---|---|---|
Center | string | center | Used to set text alignment as Center |
Justify | string | justify | Used to set text alignment as Justify |
Left | string | left | Used to set text alignment as Left |
Right | string | right | Used to set text alignment as Right |
Default Value
- “left”
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [textAlign]="textAlign"/>
export class AppComponent {
textAlign:any;
maskFormat:string;
constructor(){
this.textAlign = 'left';
this.maskFormat ='99-9999';
}
}
validationMessage object
Sets the jQuery validation error message in mask edit. This property works when the widget is present inside the form. Include jquery.validate.min.js plugin additionally.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [validationRules]="validationRules" [validationMessage]="validationMessage"/>
export class AppComponent {
validationRules:Object;
validationMessage:Object;
constructor(){
this.validationRules = { required: true };
this.validationMessage = { required: "Required MaskEdit value" };
}
}
validationRules object
Sets the jQuery validation rules to the MaskEdit. This property works when the widget is present inside the form. Include jquery.validate.min.js plugin additionally.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [validationRules]="validationRules"/>
export class AppComponent {
validationRules:Object;
constructor(){
this.validationRules = { required: true };
}
}
value string
Specifies the value for the mask edit textbox control.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [value]="value"/>
export class AppComponent {
value:string;
maskFormat:string;
constructor(){
this.value = '459978';
this.maskFormat = '99-9999';
}
}
watermarkText string
Specifies the water mark text to be displayed in input text.
Default Value
- null
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [watermarkText]="watermarkText"/>
export class AppComponent {
watermarkText:string;
maskFormat:string;
constructor(){
this.watermarkText = 'Enter value';
this.maskFormat = '99-9999';
}
}
width string
Specifies the width for the mask edit textbox control.
Default Value
- 143pixel
Example
<input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [width]="width"/>
export class AppComponent {
width:string;
maskFormat:string;
constructor(){
this.width = '143';
this.maskFormat = '99-9999';
}
}
Methods
clear()
To clear the text in mask edit textbox control.
Example
<input id="maskedit" ej-maskedit/>
// Create MaskEdit control object
var maskObj = $("#maskedit").data("ejMaskEdit");
maskObj.clear(); // clear the mask edit control
disable()
To disable the mask edit textbox control.
Example
<input id="maskedit" ej-maskedit/>
// Create MaskEdit control object
var maskObj = $("#maskedit").data("ejMaskEdit");
maskObj.disable(); // disable the mask edit control
enable()
To enable the mask edit textbox control.
Example
<input id="maskedit" ej-maskedit/>
// Create MaskEdit control object
var maskObj = $("#maskedit").data("ejMaskEdit");
maskObj.enable(); // enable the mask edit control
get_StrippedValue()
To obtained the pure value of the text value, removes all the symbols in mask edit textbox control.
Returns:
string
Example
<input id="maskedit" ej-maskedit/>
// Create MaskEdit control object
var maskObj = $("#maskedit").data("ejMaskEdit");
// Return the pure value of the text value, removes all the symbols
alert(maskObj.get_StrippedValue());
get_UnstrippedValue()
To obtained the textbox value as such that, Just replace all ‘_’ to ‘ ‘(space) in mask edit textbox control.
Returns:
string
Example
<input id="maskedit" ej-maskedit/>
// Create MaskEdit control object
var maskObj = $("#maskedit").data("ejMaskEdit");
// Return the textbox value as such that, Just replace all '_' to ' '(space)
alert(maskObj.get_UnstrippedValue());
Events
change
Fires when value changed in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (change)="onChange($event)"/>
export class AppComponent {
constructor(){
}
onChange(e: any){
// Your code here
}
}
create
Fires after MaskEdit control is created.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the MaskEdit model |
type | string | returns the name of the event |
Example
<input id="maskedit" ej-maskedit (create)="onCreate($event)"/>
export class AppComponent {
constructor(){
}
onCreate(e: any){
// Your code here
}
}
destroy
Fires when the MaskEdit is destroyed successfully.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the MaskEdit model |
type | string | returns the name of the event |
Example
<input id="maskedit" ej-maskedit (destroy)="onDestroy($event)"/>
export class AppComponent {
constructor(){
}
onDestroy(e: any){
// Your code here
}
}
focusIn
Fires when focused in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (focusIn)="onFocusIn($event)"/>
export class AppComponent {
constructor(){
}
onFocusIn(e: any){
// Your code here
}
}
focusOut
Fires when focused out in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (focusOut)="onFocusOut($event)"/>
export class AppComponent {
constructor(){
}
onFocusOut(e: any){
// Your code here
}
}
keydown
Fires when keydown in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (keydown)="onKeydown($event)"/>
export class AppComponent {
constructor(){
}
onKeydown(e: any){
// Your code here
}
}
keyPress
Fires when key press in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (keyPress)="onKeyPress($event)"/>
export class AppComponent {
constructor(){
}
onKeyPress(e: any){
// Your code here
}
}
keyup
Fires when keyup in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (keyup)="onKeyup($event)"/>
export class AppComponent {
constructor(){
}
onKeyup(e: any){
// Your code here
}
}
mouseOut
Fires when mouse out in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (mouseOut)="onMouseOut($event)"/>
export class AppComponent {
constructor(){
}
onMouseOut(e: any){
// Your code here
}
}
mouseOver
Fires when mouse over in mask edit textbox control.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from mask edit textbox control
|
Example
<input id="maskedit" ej-maskedit (mouseOver)="onMouseOver($event)"/>
export class AppComponent {
constructor(){
}
onMouseOver(e: any){
// Your code here
}
}