MaskEdit Properties

CustomCharacter

The MaskEdit allows you to use the custom character option. The specified character is allowed to enter in the Mask Edit Textbox by using the customCharacter property.

HidePromptOnLeave

The MaskEdit provides the option to hide the prompt when you focus out from the control. The mask prompt is visible when you focus again to the control. The default value of hidePromptOnLeave is false.

InputMode

The MaskEdit supports two type of inputs such as text and password that have been assigned by using the enum values ej.InputMode.Text and ej.InputMode.Password. The default value for inputMode is text in MaskEdit.

MaskFormat

The MaskEdit provides the option to define the maskFormat to the value. The default value for maskFormat property is empty string.

The following steps explain the implementation of MaskEdit Properties.

In the HTML page, add a <div> element to render the MaskEdit widget.

  • html
  • <input id="maskedit" ej-maskedit [name]="name" [maskFormat]="format" 
    [customCharacter]="customCharacter" [inputMode]="inputMode" [hidePromptOnLeave]="true" />
  • html
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'src/maskedit/maskedit.component.html'
    })
    export class MaskEditComponent {
        public name: string;
        public format: any;
        public inputMode: any;
        public customCharacter: string;
        constructor() {
            this.name = "mask";
            this.format = "99-999-CCCC";
            this.inputMode = ej.InputMode.Text;
            this.customCharacter = "r";
        }
    }

    The output for MaskEdit with its properties is as follows.

    MaskEdit with MaskFormat

    MaskEdit with HidePromptOnLeave

    MaskEdit with prompt focus

    MaskEdit with InputMode text

    MaskEdit with CustomCharacter