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

  • HTML
  • <input id="maskedit" ej-maskedit/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [cssClass]="cssClass"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [customCharacter]="customCharacter"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [enabled]="enabled"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [enablePersistence]="enablePersistence"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [height]="height"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [hidePromptOnLeave]="hidePromptOnLeave"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [htmlAttributes]="htmlAttributes"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [inputMode]="inputMode"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [locale]="locale"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [name]="name"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [readOnly]="readOnly"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [showError]="showError"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [showPromptChar]="showPromptChar"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [showRoundedCorner]="showRoundedCorner"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [textAlign]="textAlign"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [validationRules]="validationRules" [validationMessage]="validationMessage"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [validationRules]="validationRules"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [value]="value"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [watermarkText]="watermarkText"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit [maskFormat]="maskFormat" [width]="width"/>
  • TS
  • 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

  • HTML
  • <input id="maskedit" ej-maskedit/>
  • TS
  • // 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

  • HTML
  • <input id="maskedit" ej-maskedit/>
  • TS
  • // 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

  • HTML
  • <input id="maskedit" ej-maskedit/>
  • TS
  • // 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

  • HTML
  • <input id="maskedit" ej-maskedit/>
  • TS
  • // 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

  • HTML
  • <input id="maskedit" ej-maskedit/>
  • TS
  • // 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (change)="onChange($event)"/>
  • TS
  • 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 object returns the MaskEdit model
    type string returns the name of the event

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (create)="onCreate($event)"/>
  • TS
  • 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 object returns the MaskEdit model
    type string returns the name of the event

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (destroy)="onDestroy($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (focusIn)="onFocusIn($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (focusOut)="onFocusOut($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (keydown)="onKeydown($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (keyPress)="onKeyPress($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (keyup)="onKeyup($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (mouseOut)="onMouseOut($event)"/>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the mask edit model
    type string returns the name of the event
    value number returns the mask edit value
    unmaskedValue string returns unstripped value in mask edit textbox control.

    Example

  • HTML
  • <input id="maskedit" ej-maskedit (mouseOver)="onMouseOver($event)"/>
  • TS
  • export class AppComponent { 
            constructor(){
            }
            onMouseOver(e: any){ 
            // Your code here
            }
    
     }