ejMaskEdit

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.

Syntax

  • javascript
  • $(element).ejMaskEdit()

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
    
            // Create MaskEdit
            $('#mask').ejMaskEdit();
    
        </script>

    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="mask" type="text" />
    
        <script>
            //To set cssClass API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", cssClass: "gradient-lime" });
        </script>

    customCharacter string

    Specify the custom character allowed to entered in mask edit textbox control.

    Default Value

    • null

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set customCharacter API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "C-99-9999", customCharacter: "#" });
        </script>

    enabled boolean

    Specify the state of the mask edit textbox control.

    Default Value

    • true

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set enabled API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", enabled: true });
        </script>

    enablePersistence boolean

    Specify the enablePersistence to mask edit textbox to save current model value to browser cookies for state maintains.

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set enablePersistence API value during initialization
            $("#mask").ejMaskEdit({ enablePersistence:true });
        </script>

    height string

    Specifies the height for the mask edit textbox control.

    Default Value

    • 28 px

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set height API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", height: "28px" });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set hidePromptOnLeave API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", hidePromptOnLeave: true });
        </script>

    htmlAttributes object

    Specifies the list of HTML attributes to be added to mask edit textbox.

    Default Value

    • {}

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set htmlAttributes API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", htmlAttributes: { name:"maskTextBox" } });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set inputMode API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", inputMode: ej.InputMode.Password });
        </script>

    locale string

    Defines the localization culture for MaskEdit.

    Default Value

    • en-US

    Example

  • html
  • <input id="mask" type="text" /> 
      
    <script>
    //To set locale API value during initialization  
            $("#mask").ejMaskEdit({ maskFormat: "$99,999.99",locale:"de-DE" });                   
    </script>

    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="mask" type="text" />
    
        <script>
            //To set maskFormat API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999" });
        </script>

    name string

    Specifies the name attribute value for the mask edit textbox.

    Default Value

    • null

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set name API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999",name:"insurance_number" });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set readOnly API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", value: "456789", readOnly: true });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set showError API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", showError: true });
        </script>

    ### 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="mask" type="text" />
    
        <script>
            //To set showPromptChar API value during initialization
            $("#mask").ejMaskEdit({showPromptChar: false });
        </script>

    showRoundedCorner boolean

    MaskEdit input is displayed in rounded corner style when this property is set to true.

    Default Value

    • false

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set showRoundedCorner API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", showRoundedCorner: true });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set textAlign API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", textAlign: "left" });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set validationMessage value during initialization
            $("#mask").ejMaskEdit({ validationRules: { required: true }, validationMessage: { required: "Required MaskEdit value" } });
        </script>

    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="mask" type="text" />
    
        <script>
            //To set validationRules value during initialization
            $("#mask").ejMaskEdit({ validationRules: { required: true } });
        </script>

    value string

    Specifies the value for the mask edit textbox control.

    Default Value

    • null

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set value API  during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", value: "459978" });
        </script>

    watermarkText string

    Specifies the water mark text to be displayed in input text.

    Default Value

    • null

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set watermarkText API value during initialization
            $("#mask").ejMaskEdit({ watermarkText: "Enter value" });
        </script>

    width string

    Specifies the width for the mask edit textbox control.

    Default Value

    • 143pixel

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            //To set width API value during initialization
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", width: 143 });
        </script>

    Methods

    clear()

    To clear the text in mask edit textbox control.

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            // Create MaskEdit control
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", value: "345678" });
            
            // Create MaskEdit control object
            var maskObj = $("#mask").data("ejMaskEdit");
            maskObj.clear(); // clear the mask edit control
        </script>
  • html
  • <input id="mask" type="text" />
    
        <script>
            $("#mask").ejMaskEdit({ maskFormat: "99-9999", value: "345678" });
            // clear the maskedit control
            $("#mask").ejMaskEdit("clear");
        </script>

    disable()

    To disable the mask edit textbox control.

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            // Create MaskEdit control
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "45340078" });
    
            // Create MaskEdit control object
            var maskObj = $("#mask").data("ejMaskEdit");
            maskObj.disable(); // disable the mask edit control
        </script>
  • html
  • <input id="mask" type="text" />
    
        <script>
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "45340078" });
            // disable the maskedit control
            $("#mask").ejMaskEdit("disable");
        </script>

    enable()

    To enable the mask edit textbox control.

    Example

  • html
  • <input id="mask" type="text" />
    
        <script>
            // Create MaskEdit control
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "12345678" });
    
            // Create MaskEdit control object
            var maskObj = $("#mask").data("ejMaskEdit");
            maskObj.enable(); // enable the mask edit control
        </script>
  • html
  • <input id="mask" type="text" />
    
        <script>
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "12345678" });
            // enable the mask edit control 
            $("#mask").ejMaskEdit("enable");
        </script>

    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="mask" type="text" />
    
        <script>
            // Create MaskEdit control
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "12345678" });
    
            // Create MaskEdit control object
            var maskObj = $("#mask").data("ejMaskEdit");
            // Return the pure value of the text value, removes all the symbols
            alert(maskObj.get_StrippedValue()); 
        </script>
  • html
  • <input id="mask" type="text" />
    
        <script>
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "12345678" });
            // Return the pure value of the text value, removes all the symbols
            alert($("#mask").ejMaskEdit("get_StrippedValue"));
        </script>

    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="mask" type="text" />
    
        <script>
            // Create MaskEdit control
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "12345678" });
    
            // Create MaskEdit control object
            var maskObj = $("#mask").data("ejMaskEdit");
            // Return the textbox value as such that, Just replace all '_' to ' '(space)
            alert(maskObj.get_UnstrippedValue()); 
        </script>
  • html
  • <input id="mask" type="text" />
    
        <script>
            $("#mask").ejMaskEdit({ maskFormat: "99-99-9999", value: "12345678" });
            // Return the textbox value as such that, Just replace all '_' to ' '(space)
            alert($("#mask").ejMaskEdit("get_UnstrippedValue"));
        </script>

    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="mask" type="text" />
    
        <script>
            //change event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "99999 - 9999",
                change: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //create event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "(999)999-9999",
                create: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //destroy event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "(999)999-9999",
                destroy: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //focusIn event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "aa-99-99-a",
                focusIn: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //focusOut event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "(999)999-9999",
                focusOut: function (args) { }
            });
        </script>

    onKeyDown

    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="mask" type="text" />
    
        <script>
            //keydown event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "99-9999",
                onKeyDown: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //keyPress event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "99-99-9999",
                keyPress: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //keyup event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "99-99-9999",
                keyUp: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //mouseOut event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "99-99-9999",
                mouseOut: function (args) { }
            });
        </script>

    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="mask" type="text" />
    
        <script>
            //mouseOver event for mask edit textbox control
            $("#mask").ejMaskEdit({
                maskFormat: "99-99-9999",
                mouseOver: function (args) { }
            });
        </script>