Behavior Settings

28 Jun 20188 minutes to read

Persistence Support

The MaskEdit control provides state maintenance support. You can maintain the previous changes made in the control after a page loads. By default, the ‘enablePersistence’ property is set to ‘false’ in the MaskEdit.

The following steps explain the State Maintenance in the MaskEdit control.

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

HTML

<input id="maskedit" type="text" />

JAVASCRIPT

$(function() {
            $("#maskedit").ejMaskEdit({
                name: "mask",
                inputMode: ej.InputMode.Text,
                maskFormat: "99-999-99999",
                enablePersistence: true,
            });
        });

Output of MaskEdit with enablePersistence is as follows.

Enabled or Disabled

MaskEdit has an option to enable or disable its element. You can set the enabled property as “false” to disable the MaskEdit controls.

The following steps explain the enabled property in the MaskEdit control.

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

HTML

<input id="maskedit" type="text" />

JAVASCRIPT

$(function () {
            $("#maskedit").ejMaskEdit(
            {
                name: "mask",
                inputMode: ej.InputMode.Text,
                maskFormat: "99-999-99999",
                enabled: false,
            });
        });

Output when enabled is “false” and when enabled is “true”.

MaskEdit with disabled state

MaskEdit with default state

Adjusting MaskEdit Size

MaskEdit size can be modified by using the height and width properties. You can customize the size of MaskEdit by using these properties.

The following steps explain the width and height property in the MaskEdit control.

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

HTML

<input id="maskedit" type="text" />

JAVASCRIPT

$(function () {
            $("#maskedit").ejMaskEdit(
            {
                name: "mask",
                inputMode: ej.InputMode.Text,
                maskFormat: "99-999-99999",
                width: 150,
                height: 50
            });
        });

Output of MaskEdit after setting “height” and “width” is as follows.

Define Value

The value of MaskEdit can be assigned by using the value property. The default value for value property is null.
Specify the name attribute value for the mask edit textbox.
You can get the raw value of MaskEdit without literals and prompt characters by using the get_StrippedValue method.
Also you get the value of MaskEdit with the masked format by using the get_UnstrippedValue method.

The following steps explain the value property in the MaskEdit control.

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

HTML

<input id="maskedit" type="text" />

JAVASCRIPT

$(function () {
            $("#maskedit").ejMaskEdit(
            {
                name: "mask",
                inputMode: ej.InputMode.Text,
                maskFormat: "99-999-99999",
                value: "1234567890",
            });
        });

Output of MaskEdit with the value property is as follows.

Read Only Support

MaskEdit supports read only option. When you enable the readOnly property to the control, the value cannot be changed in the MaskEdit. You can set the readOnly property as “true” to enable this option.

The following steps explain the readOnly property in the MaskEdit control.

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

HTML

<input id="maskedit" type="text" />

JAVASCRIPT

$(function () {
            $("#maskedit").ejMaskEdit(
            {
                name: "mask",
                inputMode: ej.InputMode.Text,
                maskFormat: "99-999-99999",
                value: "123456",
                readOnly: true
            });
        });

Output of MaskEdit when readOnly is “true” is as follows. MaskEdit values cannot be edited or changed.

Error Visibility

The MaskEdit has an option that shows the error value with red colored text. It is used to validate the Mask Edit value. You can set the showError property as “true” to enable this option.

The following steps explain the showError property in the MaskEdit control.

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

HTML

<input id="maskedit" type="text" />

JAVASCRIPT

$(function () {
            $("#maskedit").ejMaskEdit(
            {
                name: "mask",
                inputMode: ej.InputMode.Text,
                maskFormat: "99-999-99999",
                value: "123456",
                showError: true
            });
        });

Output for MaskEdit when showError is “true” is as follows.

MaskEdit with error class

MaskEdit with proper input value