ejMaskEdit
11 Jul 201824 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.
Syntax
$(element).ejMaskEdit()Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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><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
<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><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
<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><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
<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><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
<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><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
|
Example
<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 |
|
returns the MaskEdit model |
| type | string | returns the name of the event |
Example
<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 |
|
returns the MaskEdit model |
| type | string | returns the name of the event |
Example
<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
|
Example
<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
|
Example
<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
|
Example
<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
|
Example
<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
|
Example
<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
|
Example
<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
|
Example
<input id="mask" type="text" />
<script>
//mouseOver event for mask edit textbox control
$("#mask").ejMaskEdit({
maskFormat: "99-99-9999",
mouseOver: function (args) { }
});
</script>