Ignite UI™ API Documentation

ui.igMaskEditor

Overview
Options
Events
Methods
Theming

The igMaskEditor control gives you the control to format and constrain user input text using configurable mask rules. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The igMaskEditor control extends the functionality of the igTextEditor control. For more details on the igMaskEditor control’s API, refer to the igTextEditor control’s API documentation.

The following code snippet demonstrates how to initialize the igMaskEditor control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igMaskEditor control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

      <!doctype html>
      <html>
      <head>
          <!-- Infragistics Combined CSS -->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
          <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>
          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>          
          <!-- Infragistics Combined Scripts -->
          <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
                $("#maskEditor").igMaskEditor({
                    width: 160,
                    inputMask: "CCCCC",
                    nullText: "Enter Value"
                });
            });
          </script>
      </head>
      <body>
         <input id="maskEditor" />
      </body>
      </html>

Related Samples

allowNullValue
Inherited

Type:: bool
Default:: false

Sets/Gets ability to prevent null value.
If that option is false, and editor has no value, then value is set to an empty string.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            allowNullValue : false
        });

        //Get
        var allowNullValue = $(".selector").igMaskEditor("option", "allowNullValue");

        //Set
        $(".selector").igMaskEditor("option", "allowNullValue", false);

buttonType

Type:

enumeration

Default:

none
Gets visibility of spin and clear buttons. That option can be set only on initialization. Combinations like 'spin,clear' are supported too.
Members
- clear
- Type:string
- button to clear value is located on the right side of input-field (or left side if base html element has direction:rtl);.
- spin
- Type:string
- spin buttons are located on the right side of input-field (or left side if base html element has direction:rtl).
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            buttonType : "clear"
        });

        //Get
        var button = $(".selector").igMaskEditor("option", "buttonType");

        //Set
        $(".selector").igMaskEditor("option", "buttonType", "spin");
        
```
dataMode

Type:

enumeration

Default:

allText
Gets type of value returned by the get of value() method. That also affects functionality of the set value(val) method and the copy/paste operations of browser.
Members
- rawText
- Type:string
- only entered text. All unfilled prompts (positions) and literals are ignored (removed).
- rawTextWithRequiredPrompts
- Type:string
- only entered text and required prompts (positions). All optional unfilled prompts and literals are ignored (removed).
- rawTextWithAllPrompts
- Type:string
- only entered text and prompts (positions). All literals are ignored (removed).
- rawTextWithLiterals
- Type:string
- only entered text and literals. All unfilled prompts are ignored (removed).
- rawTextWithRequiredPromptsAndLiterals
- Type:string
- only entered text, required prompts (positions) and literals. All optional unfilled prompts are ignored (removed).
- allText
- Type:string
- entered text, all prompts (positions) and literals. Note: that is used as default.
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            dataMode : "rawTextWithLiterals"
        });
        
        //Get
        var dataMode = $(".selector").igMaskEditor("option", "dataMode");
        
        //Set
        $(".selector").igMaskEditor("option", "dataMode", "rawTextWithLiterals");
      
```

disabled
Inherited

Type:: bool
Default:: false

Gets/Sets the disabled attribute.Does not allow editing. Disables all the buttons and iteracitons applied. On submit the current value is not sent into the request.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            disabled : false
        });

        //Get
        var disabled = $(".selector").igMaskEditor("option", "disabled");

        //Set
        $(".selector").igMaskEditor("option", "disabled", true);

dropDownAnimationDuration
Inherited

Type:: number
Default:: 300

Gets/Sets show/hide drop-down list animation duration in milliseconds.

Code Sample

        //Initialize
        $(".selector").igMaskEditor({
          dropDownAnimationDuration: 500
        });
 
        //Get
        var animationShowDuration= $(".selector").igMaskEditor("option", "dropDownAnimationDuration");
 
        //Set
        $(".selector").igMaskEditor("option", "dropDownAnimationDuration", 500);

dropDownAttachedToBody
Inherited

Type:: bool
Default:: false

Gets location of drop-down list.
Value false will create html element for list as a child of main html element.
Value true creates list as a child of body.
Note! This option can not be set runtime.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            dropDownAttachedToBody : true
        });

        //Get
        var attachedToBody = $(".selector").igMaskEditor("option", "dropDownAttachedToBody");

        //Set
        $(".selector").igMaskEditor("option", "dropDownAttachedToBody", true);

dropDownOnReadOnly
Inherited

Type:: bool
Default:: false

Gets ability to limit editor to be used only from the dropdown list. When set to true the editor input is not editable.
Note! In case there are no list items - the editor will reamin readonly
Note! This option can not be set runtime.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            dropDownOnReadOnly : true
        });

        //Get
        var readOnly = $(".selector").igMaskEditor("option", "dropDownOnReadOnly");

        //Set
        $(".selector").igMaskEditor("option", "dropDownOnReadOnly", true);

emptyChar

Type:: string
Default:: " "

Gets character which is used as replacement of not-filled required position in mask when application calls get for the "value" or for the "text" methods.

Code Sample

        //Initialize
        $(".selector").igMaskEditor({
               emptyChar: "*"
        });
 
        //Get
        var emptyChar= $(".selector").igMaskEditor("option", "emptyChar");
 
        //Set
        $(".selector").igMaskEditor("option", "emptyChar", "*");

excludeKeys

Type:

string

Default:

null
Gets ability to prevent entering specific characters from keyboard or on paste.
Notes:
If a character is specified in "includeKeys" option also, then "excludeKeys" has priority.
Note! This option can not be se runtime.
Code Sample
```
        //Initialize
        $(".selector").igMaskEditor({
               excludeKeys: "ABC"
        });
 
        //Get
        var excludedKeys= $(".selector").igMaskEditor("option", "excludeKeys");
        
```
height
Inherited

Type:

enumeration

Default:

null
Gets/Sets how the height of the control can be set.
Members
- null
- Type:object
- will fit the editor inside its parent container, if no other heights are defined.
- string
- The height can be set in pixels (px) and percentage (%).
- number
- The height can be set as a number in pixels.
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            height : 25
        });

        //Get
        var height = $(".selector").igMaskEditor("option", "height");

        //Set
        $(".selector").igMaskEditor("option", "height", 25);
        
```
includeKeys

Type:

string

Default:

null
Gets ability to enter only specific characters in input-field from keyboard and on paste.
Notes:
If "excludeKeys" option contains same characters as this option, then "excludeKeys" has priority.
Note! This option can not be se runtime.
Code Sample
```
        //Initialize
        $(".selector").igMaskEditor({
             includeKeys: "ABC"
        });
 
        //Get
        var includedKeys= $(".selector").igMaskEditor("option", "includeKeys");
       
```
inputMask

Type:

string

Default:

"CCCCCCCCCC"
Gets input mask. Mask may include filter-flags and literal characters.
Literal characters are part of mask which cannot be modified by end user. In order to use a filter-flag as a literal character, the escape "\\" character should be used.
Default is "CCCCCCCCCC"
Note: optional flags/entries affect the value returned by get of the "value" and "text" methods.
List of filter-flags:
C: any keyboard character. Entry is optional.
&: any keyboard character. Entry is required.
a: letter or digit character. Entry is optional.
A: letter or digit character. Entry is required.
?: letter character. Entry is optional.
L: letter character. Entry is required.
9: digit character. Entry is optional.
0: digit character. Entry is required.
#: digit character or "+" or "_". Entry is optional with replacement by "emptyPositionChar" or by "padChar".
>: all letters to the right are converted to the upper case. In order to disable conversion, the ">" flag should be used again.
<: all letters to the right are converted to the lower case. In order to disable conversion, the "<" flag should be used again.
Note! This option can not be set runtime.
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            inputMask : "cccccccccc"
        });

        //Get
        var inputMask = $(".selector").igMaskEditor("option", "inputMask");
        
```
inputName
Inherited

Type:

string

Default:

null
Sets the name attribute of the value input. This input is used to sent the value to the server. In case the target element is input and it has name attribute, but the developer has set the inputName option, so this option overwrites the value input and removes the attribute from the element.
Code Sample
```
      //Initialize 
      $(".selector").igMaskEditor({     
          inputName : "textField"
      });  
 
      //Get 
      var inputName = $(".selector").igMaskEditor("option", "inputName");  
 
      //Set 
      $(".selector").igMaskEditor("option", "inputName", "textField");
      
```

locale
Inherited

Type:: object
Default:: null

Gets/Sets strings used for title of buttons. Value of object should contain pairs or key:value members. Note: any sub-option of locale can appear within the main option of igEditor. In this case those values within main options will have highest priority and override corresponding value in locale.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            locale: {
			        spinUpperTitle: 'SpinUp'
            }
        });

        //Get
        var locale = $(".selector").igMaskEditor("option", "locale");

        //Set
        $(".selector").igMaskEditor("option", "locale", {spinUpperTitle: 'SpinUp'});

maxLength
Inherited

Type:: number
Default:: null

Gets/Sets maximum length of text which can be entered by user.
Negative values or 0 disables that behavior.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            maxLength : 25
        });

        //Get
        var textLength = $(".selector").igMaskEditor("option", "maxLength");

        //Set
        $(".selector").igMaskEditor("option", "maxLength", 25);

nullValue
Inherited

Type:: enumeration
Default:: null

Sets/Gets the representation of null value. In case of default the value for the input is set to null, which makes the input to hold an empty string.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            nullValue : null
        });

        //Get
        var nullValue = $(".selector").igMaskEditor("option", "nullValue");

        //Set
        $(".selector").igMaskEditor("option", "nullValue", null);

padChar

Type:: string
Default:: " "

Gets character which is used as replacement of not-filled required position in mask when editor is in display mode (not focused).

Code Sample

        //Initialize
        $(".selector").igMaskEditor({
               padChar: "*"
        });
 
        //Get
        var padChar= $(".selector").igMaskEditor("option", "padChar");
 
        //Set
        $(".selector").igMaskEditor("option", "padChar", "*");

placeHolder
Inherited

Type:: string
Default:: null

Gets/Sets text which appears in editor when editor has no focus and "value" in editor is null or empty string.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            placeHolder : "Enter Value"
        });

        //Get
        var placeHolder = $(".selector").igMaskEditor("option", "placeHolder");

        //Set
        $(".selector").igMaskEditor("option", "placeHolder", "Enter Value");

preventSubmitOnEnter
Inherited

Type:: bool
Default:: false

Sets the ability of the editor to prevent form submition on enter key pressed.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            preventSubmitOnEnter : false
        });

        //Get
        var preventSubmitOnEnter = $(".selector").igMaskEditor("option", "preventSubmitOnEnter");

        //Set
        $(".selector").igMaskEditor("option", "preventSubmitOnEnter", false);

readOnly
Inherited

Type:: bool
Default:: false

Gets/Sets the readonly attribute.Does not allow editing. Disables all the buttons and iteracitons applied. On submit the current value is sent into the request.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            readOnly : true
        });

        //Get
        var readOnly = $(".selector").igMaskEditor("option", "readOnly");

        //Set
        $(".selector").igMaskEditor("option", "readOnly", true);

regional

Type:: object
Default:: null

Sets gets custom regional settings for editor. If it is string, then $.ig.regional[stringValue] is assumed.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            regional: "en-US"
        });
        
        //Get
        var region = $(".selector").igMaskEditor("option", "regional");
        
        //Set
        $(".selector").igMaskEditor("option", "regional", "en-US");

revertIfNotValid
Inherited

Type:: bool
Default:: true

Sets the editor to revert value to previous value in case of not valid value on blur, or enter key. If set to false clear is called.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            revertIfNotValid : true
        });

        //Get
        var revertIfNotValid = $(".selector").igMaskEditor("option", "revertIfNotValid");

        //Set
        $(".selector").igMaskEditor("option", "revertIfNotValid", true);

selectionOnFocus
Inherited

Type:

enumeration

Default:

selectAll
Set the action when the editor gets focused. The default value is selectAll.
Members
- selectAll
- Type:string
- Setting this option will select all the text into the editor when the edit mode gets enetered.
- atStart
- Type:string
- Setting this option will move the cursor at the begining the text into the editor when the edit mode gets enetered.
- atEnd
- Type:string
- Setting this option will move the cursor at the end the text into the editor when the edit mode gets enetered.
- browserDefault
- Type:string
- Setting this option won't do any extra logic, but proceed with browser default behavior.
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            selectionOnFocus: 0
        });
 
        //Get
        var selectionOnFocus= $(".selector").igMaskEditor("option", "selectionOnFocus");
 
        //Set
        $(".selector").igMaskEditor("option", "selectionOnFocus", 0);
      
```

spinWrapAround
Inherited

Type:: bool
Default:: false

Gets/Sets ability to automatically change the hoverd item into the opened dropdown list to its oposide side. When last item is reached and the spin down is clicked the first item gets hovered and vice versa.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            spinWrapAround : true
        });

        //Get
        var spinAround = $(".selector").igMaskEditor("option", "spinWrapAround");

        //Set
        $(".selector").igMaskEditor("option", "spinWrapAround", true);

suppressNotifications
Inherited

Type:: bool
Default:: false

Disables default notifications for basic validation scenarios built in the editors such as required list selection, value wrapping around or spin limits.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            suppressNotifications : true
        });

        //Get
        var suppressNotifications = $(".selector").igMaskEditor("option", "suppressNotifications");

        //Set
        $(".selector").igMaskEditor("option", "suppressNotifications", true);

tabIndex
Inherited

Type:: number
Default:: null

Gets/Sets value in tabIndex for editor.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            tabIndex : 3
        });

        //Get
        var tabIndex = $(".selector").igMaskEditor("option", "tabIndex");

        //Set
        $(".selector").igMaskEditor("option", "tabIndex", 3);

textAlign
Inherited

Type:

enumeration

Default:

left
Gets/Sets horizontal alignment of text in editor. If that option is not set, then 'right' is used for 'numeric', 'currency' and 'percent' editors and the 'left' is used for all other types of editor.
Members
- left
- Type:string
- right
- Type:string
- center
- Type:string
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            textAlign : "center"
        });

        //Get
        var align = $(".selector").igMaskEditor("option", "textAlign");

        //Set
        $(".selector").igMaskEditor("option", "textAlign", "center");
        
```

toLower
Inherited

Type:: bool
Default:: false

Gets/Sets ability to convert input characters to lower case (true) or keeps characters as they are (false). That option has effect only while keyboard entries and paste.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            toLower : true
        });

        //Get
        var toLower = $(".selector").igMaskEditor("option", "toLower");

        //Set
        $(".selector").igMaskEditor("option", "toLower", true);

toUpper
Inherited

Type:: bool
Default:: false

Gets/Sets ability to convert input characters to upper case (true) or keeps characters as they are (false). That option has effect only while keyboard entries and paste.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            toUpper : true
        });

        //Get
        var toUpper = $(".selector").igMaskEditor("option", "toUpper");

        //Set
        $(".selector").igMaskEditor("option", "toUpper", true);

unfilledCharsPrompt

Type:: string
Default:: "_"

Gets character which is used as prompt in edit mode for available entry position.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            unfilledCharsPrompt : "*"
        });
        
        //Get
        var prompt = $(".selector").igMaskEditor("option", "unfilledCharsPrompt");
        
        //Set
        $(".selector").igMaskEditor("option", "unfilledCharsPrompt", "*");

validatorOptions
Inherited

Type:: object
Default:: null

Sets/Gets options supported by the igValidator widget.
Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors,
while similar options of the editor work to prevent wrong values from being entered.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            validatorOptions : {
               successMessage: "Success",
					     required: true,
					     onchange: true,
               notificationOptions: { mode: "popover" }
            }
        });

        //Get
        var validateOptions = $(".selector").igMaskEditor("option", "validatorOptions");

        //Set
        $(".selector").igMaskEditor("option", "validatorOptions", {onblur: true, onchange: true});

value
Inherited

Type:: object
Default:: null

Gets/Sets value in editor. The effect of setting/getting that option depends on type of editor and on dataMode options for every type of editor.

Code Sample

 
        //Initialize
        $(".selector").igMaskEditor({
            value : "0415565685"
        });

        //Get
        var value = $(".selector").igMaskEditor("option", "value");

        //Set
        $(".selector").igMaskEditor("option", "value", "0415565685");

width
Inherited

Type:

enumeration

Default:

null
Gets/Sets how the width of the control can be set.
Members
- null
- Type:object
- will stretch to fit data, if no other widths are defined.
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number in pixels.
Code Sample
```
 
        //Initialize
        $(".selector").igMaskEditor({
            width : 200
        });

        //Get
        var width = $(".selector").igMaskEditor("option", "width");

        //Set
        $(".selector").igMaskEditor("option", "width", 200);
        
```

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

blur
Inherited

Cancellable:: false

Event which is raised when input field of editor loses focus.
Function takes argument evt.
Use ui.owner to obtain reference to igEditor.
Use evt.originalEvent to obtain reference to event of browser.

Code Sample

          $(document).delegate(".selector", "igmaskeditorblur", function (evt) {

              //return browser event
              evt.originalEvent;
          });

          //Initialize
          $(".selector").igMaskEditor({
              blur: function (evt) {
              ...
              }
          });

focus
Inherited

Cancellable:: false

Event which is raised when input field of editor gets focus.
Function takes argument evt.
Use ui.owner to obtain reference to igEditor.
Use evt.originalEvent to obtain reference to event of browser.

Code Sample

             $(document).delegate(".selector", "igmaskeditorfocus", function (evt) {
                  
                //return browser event
                evt.originalEvent;
            });
            
            //Initialize
            $(".selector").igMaskEditor({
                focus: function (evt) {
                ...
                }
            });

keydown
Inherited

Cancellable:: true

Event which is raised on keydown event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.

Code Sample

      $(document).delegate(".selector", "igmaskeditorkeydown", function (evt, ui) {
          //return browser event
          evt.originalEvent;
          //use to obtain reference to igEditor 
          ui.owner; 
          //use to obtain value of keyCode
          ui.key;
      });

      //Initialize
      $(".selector").igMaskEditor({
          keydown: function (evt, ui) {
          ...
          }
      });

keypress
Inherited

Cancellable:: true

Event which is raised on keypress event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Set ui.key to another character which will replace original entry.

Code Sample

        $(document).delegate(".selector", "igmaskeditorkeypress", function (evt, ui) {
            //return browser event
            evt.originalEvent;
            //use to obtain reference to igEditor 
            ui.owner;
            //use to obtain value of keyCode
            ui.key;
            //set the ui.key to "A" -a cahracter which will replace the original entry
            ui.key = 65;
        });

        //Initialize
        $(".selector").igMaskEditor({
            keypress: function (evt, ui) {
            ...
            }
        });

keyup
Inherited

Cancellable:: false

Event which is raised on keyup event.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.

Code Sample

        $(document).delegate(".selector", "igmaskeditorkeyup", function (evt, ui) {
            //return browser event
            evt.originalEvent;
            
            //use to obtain reference to igEditor 
            ui.owner;
            //use to obtain value of keyCode
            ui.key;

        });

        //Initialize
        $(".selector").igMaskEditor({
            keyup: function (evt, ui) {
            ...
            }
        });

mousedown
Inherited

Cancellable:: false

Event which is raised on mousedown at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

        $(document).delegate(".selector", "igmaskeditormousedown", function (evt, ui) {
            //return browser event
            evt.originalEvent;

            //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
            ui.elementType;

            //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#.
            ui.id;

        });

        //Initialize
        $(".selector").igMaskEditor({
            mousedown: function (evt, ui) {
            ...
            }
        });

mousemove
Inherited

Cancellable:: false

Event which is raised on mousemove at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

        $(document).delegate(".selector", "igmaskeditormousemove", function (evt, ui) {
            //return browser event
            evt.originalEvent;

            //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
            ui.elementType;

            //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#.
            ui.id;

        });

        //Initialize
        $(".selector").igMaskEditor({
            mousemove: function (evt, ui) {
            ...
            }
        });

mouseout
Inherited

Cancellable:: false

Event which is raised on mouseleave at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

        $(document).delegate(".selector", "igmaskeditormouseout", function (evt, ui) {
            //return browser event
            evt.originalEvent;

            //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
            ui.elementType;

            //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#.
            ui.id;
        });

        //Initialize
        $(".selector").igMaskEditor({
            mouseout: function (evt, ui) {
            ...
            }
        });

mouseover
Inherited

Cancellable:: false

Event which is raised on mouseover at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

      $(document).delegate(".selector", "igmaskeditormouseover", function (evt, ui) {
          //return browser event
          evt.originalEvent;
          
          //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
          ui.elementType;

          //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#.
          ui.id;
      });

      //Initialize
      $(".selector").igMaskEditor({
          mouseover: function (evt, ui) {
          ...
          }
      });

mouseup
Inherited

Cancellable:: false

Event which is raised on mouseup at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

      $(document).delegate(".selector", "igmaskeditormouseup", function (evt, ui) {
          //return browser event
          evt.originalEvent;


          //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
          ui.elementType;

          //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#.
          ui.id;

      });

      //Initialize
      $(".selector").igMaskEditor({
          mouseup: function (evt, ui) {
          ...
          }
      });

rendered
Inherited

Cancellable:: false

Event which is raised after rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.

Code Sample

        $(document).delegate(".selector", "igmaskeditorrendered", function (evt, ui) {
          
        });

        //Initialize
        $(".selector").igMaskEditor({
            rendered: function () {
            ...
            }
        });

rendering
Inherited

Cancellable:: false

Event which is raised before rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.

Code Sample

        $(document).delegate(".selector", "igmaskeditorrendering", function (evt, ui) {
          
        });

        //Initialize
        $(".selector").igMaskEditor({
            rendering: function () {
            ...
            }
        });

textChanged
Inherited

Cancellable:: false

Event which is raised after text in editor was changed. It can be raised when keyUp event occurs,
or when the clear button is clicked or when an item from a list is selected.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.text to obtain new text
Use ui.oldText to obtain the old text.

Code Sample

        $(document).delegate(".selector", "igmaskeditortextChanged", function (evt, ui) {
          
          //Use to obtain reference to igEditor
          ui.owner;
				  //Use to obtain new text
          ui.text;
				  //Use to obtain the old text
          ui.oldTеxt;
        });

        //Initialize
        $(".selector").igMaskEditor({
            textChanged: function (evt, ui) {
            ...
            }
        });

valueChanged
Inherited

Cancellable:: false

Event which is raised after value in editor was changed. It can be raised on lost focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.originalValue to obtain the original value.
Use ui.editorInput to obtain reference to the editor input.

Code Sample

        $(document).delegate(".selector", "igmaskeditorvaluechanged", function (evt, ui) {

						//Use to obtain reference to igEditor
						ui.owner;
						//Use to obtain new value
						ui.newValue;
						//Use to obtain the value coming from the native event arguments
						ui.originalValue;
						//Use to obtain reference to editor input
						ui.editorInput
        });

        //Initialize
        $(".selector").igMaskEditor({
            valueChanged: function (evt, ui) {
            ...
            }
        });

valueChanging
Inherited

Cancellable:: true

Event which is raised before value in editor was changed.
Return false in order to cancel change.
It can be raised on lost focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.oldValue to obtain the old value.
Use ui.editorInput to obtain reference to the editor input.

Code Sample

        $(document).delegate(".selector", "igmaskeditorvaluechanging", function (evt, ui) {

						//Use to obtain reference to igEditor
						ui.owner;
						//Use to obtain new value
						ui.newValue;
						//Use to obtain old value
						ui.oldValue;
						//Use to obtain reference to editor input
						ui.editorInput
 
        });

        //Initialize
        $(".selector").igMaskEditor({
            valueChanging: function (evt, ui) {
            ...
            }
        });

Show Details

clearButton
Inherited

.igMaskEditor( "clearButton" );

Return Type:

jquery

Return Type Description:

Returns reference to jquery object.
Returns a reference to the clear button UI element of the editor.
Code Sample
```
 
      $(".selector").igMaskEditor("clearButton");
      
```
destroy
Inherited

.igMaskEditor( "destroy" );
Destructor of the widget.
Code Sample
```
 
       $(".selector").igMaskEditor("destroy");
      
```
displayValue
Inherited

.igMaskEditor( "displayValue" );

Return Type:

string

Return Type Description:

Visible text of the editor.
Gets visible text in the editor.
Code Sample
```
 
        $(".selector").igMaskEditor("displayValue");
      
```
editorContainer
Inherited

.igMaskEditor( "editorContainer" );

Return Type:

jquery

Return Type Description:

The container editor element.
Gets reference to jquery object which is used as top/outer element of igEditor.
Code Sample
```
 
        $(".selector").igMaskEditor("editorContainer");
      
```
field
Inherited

.igMaskEditor( "field" );

Return Type:

jquery

Return Type Description:

The visual editor element.
Gets the visual editor element.
Code Sample
```
 
        $(".selector").igMaskEditor("editorContainer");
      
```
getSelectedText
Inherited

.igMaskEditor( "getSelectedText" );

Return Type:

string

Return Type Description:

Selected text in editor.
Gets selected text in editor.
Code Sample
```
 
        $(".selector").igMaskEditor("getSelectedText");
      
```
getSelectionEnd
Inherited

.igMaskEditor( "getSelectionEnd" );

Return Type:

number

Return Type Description:

End index of the selected text in editor.
Gets end index of the selected text in editor.
Code Sample
```
 
        $(".selector").igMaskEditor("getSelectionEnd");
      
```
getSelectionStart
Inherited

.igMaskEditor( "getSelectionStart" );

Return Type:

number

Return Type Description:

Start index of the selected text in editor.
Gets start index of the selected text in editor.
Code Sample
```
 
        $(".selector").igMaskEditor("getSelectionStart");
      
```
hasFocus
Inherited

.igMaskEditor( "hasFocus" );

Return Type:

bool

Return Type Description:

Returns if the editor is focused or not.
Checks if editor has focus.
Code Sample
```
 
        $(".selector").igMaskEditor("hasFocus");
      
```

hide
Inherited

.igMaskEditor( "hide" );

Hides editor.

Code Sample

 
        $(".selector").igMaskEditor("hide");

inputName
Inherited

.igMaskEditor( "inputName", [newValue:string] );

Return Type:

string

Return Type Description:

Current input name.
Gets/Sets name attribute applied to the editor element.
- newValue
- Type:string
- Optional
- The new input name.
Code Sample
```
 
        $(".selector").igMaskEditor("inputName", "newName");
      
```
insert
Inherited

.igMaskEditor( "insert", string:string );
Paste text at location of caret. Note: method raises the "valueChanged" event.
- string
- Type:string
- The string to be inserted.
Code Sample
```
 
        $(".selector").igMaskEditor("insert", "20");
      
```
isValid

.igMaskEditor( "isValid" );

Return Type:

bool

Return Type Description:

Whether editor value is valid or not.
Checks if value in editor is valid. Note: This function will not trigger automatic notifications.
Code Sample
```
 
        $(".selector").igMaskEditor("isValid");
      
```
select
Inherited

.igMaskEditor( "select", start:number, end:number );
Selects text in editor. If parameters are equal, then than method sets location of caret. That method has effect only when editor has focus.
- start
- Type:number
- Start of the selection.
- end
- Type:number
- End of the selection.
Code Sample
```
 
        $(".selector").igMaskEditor("select", 2, 4);
      
```
setFocus
Inherited

.igMaskEditor( "setFocus", [delay:number] );
Set focus to editor with delay.
- delay
- Type:number
- Optional
- The delay before focusing the editor.
Code Sample
```
 
        $(".selector").igMaskEditor("setFocus", 200);
      
```

show
Inherited

.igMaskEditor( "show" );

Shows editor.

Code Sample

 
        $(".selector").igMaskEditor("show");

validate
Inherited

.igMaskEditor( "validate" );

Return Type:

bool

Return Type Description:

Whether editor value is valid or not.
Triggers validation of editor and show potential warning message. If validatorOptions are set will also call validate on the igValidator.
Code Sample
```
 
        $(".selector").igMaskEditor("validate");
      
```
validator
Inherited

.igMaskEditor( "validator" );

Return Type:

object

Return Type Description:

Returns reference to igValidator or null.
Gets reference to igValidator used by the editor.
Code Sample
```
 
        $(".selector").igMaskEditor("validator");
      
```
value

.igMaskEditor( "value", [newValue:string] );

Return Type:

string

Return Type Description:

Current mask editor value.
Gets/Sets mask editor value.
- newValue
- Type:string
- Optional
- New mask editor value.
Code Sample
```
 
        $(".selector").igMaskEditor("value", "New Text");
      
```

ui-state-active

Class applied to the top element when editor is active. Default value is 'ui-state-active'.
ui-igedit-button-common ui-unselectable

Class applied commonly to all the button containers, Default value is 'ui-igedit-button-common ui-unselectable ui-igedit-button-ltr ui-state-default'.
ui-igedit-buttonhover ui-state-hover

Classes applied to the SPAN element of button in mouse-over state. Default value is 'ui-igedit-buttonhover ui-state-hover'.
ui-igedit-buttonpressed ui-state-highlight

Classes applied to the SPAN element of button in pressed state. Default value is 'ui-igedit-buttonpressed ui-state-highlight'.
ui-igedit-cleararea ui-state-default

Class applied to the div holding the clear button. Default value is 'ui-igedit-cleararea ui-state-default'.
ui-igedit-buttonimage ui-icon-circle-close

Class applied to the div holding the clear button image. Default value is 'ui-igedit-buttonimage ui-icon-circle-close ui-icon ui-igedit-buttondefault'.
ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default

Class applied to the top element when editor is rendered in container. Default value is 'ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default'.
ui-state-disabled

Classes applied to the editing element in disabled state. Default value is 'ui-igedit-disabled ui-state-disabled'.
ui-igedit-dropdown-button

Class applied to the div holding the drop down button. Default value is 'ui-igedit-dropdown-button'.
ui-icon ui-icon-triangle-1-s ui-igedit-buttonimage

Class applied to the div holding the drop down button image. Default value is 'ui-icon ui-icon-carat-1-s ui-igedit-buttonimage'.
ui-igedit-dropdown ui-widget

Class applied to the container holding the listitems. Default value is 'ui-igedit-dropdown'.
ui-igedit-input

Class applied to the main/top element. Default value is 'ui-igedit-input'.
ui-igeditor-input-container ui-corner-all

Class applied to the div which wraps the editable input (in case of multiline textarea). Default value is "ui-igeditor-input-container ui-corner-all".
ui-state-focus

Class applied to the top element when editor is on focus. Default value is 'ui-state-focus'.
ui-state-hover

Class applied to the top element when editor is hovered. Default value is 'ui-state-hover'.
ui-igedit-listitem ui-state-default

Class applied to the SPAN element which represents item in dropdown list. Default value is 'ui-igedit-listitem ui-state-default'.
ui-state-active ui-igedit-listitemactive

Class applied to the Class applied to the SPAN element which represents active item in dropdown list. Default value is 'ui-igedit-listitemselected ui-state-highlight'.
ui-igedit-listitemhover ui-state-hover

Class applied to the Class applied to the SPAN element which represents item in dropdown list with mouse-over state. Default value is 'ui-igedit-listitemhover ui-state-hover'.
ui-igedit-listitemselected ui-state-highlight

Class applied to the Class applied to the SPAN element which represents selected item in dropdown list. Default value is 'ui-igedit-listitemselected ui-state-highlight'.
ui-igedit-placeholder

Class applied to the visible input in case of plaseHolder option set. This class is related only to the placeHolder styling. Default value is 'ui-igedit-placeholder'.
ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon

Class applied to the div holding the spin down button image. Default value is 'ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage'.
ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon

Class applied to the div holding the spin up button image. Default value is "ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage'.
ui-igedit-textarea

Class applied to the visible textarea element in case of textMode set to 'multiline'.

Ignite UI Home

ui.igMaskEditor

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

allowNullValueInherited

Code Sample

buttonType

Members

Code Sample

dataMode

Members

Code Sample

disabledInherited

Code Sample

dropDownAnimationDurationInherited

Code Sample

dropDownAttachedToBodyInherited

Code Sample

dropDownOnReadOnlyInherited

Code Sample

emptyChar

Code Sample

excludeKeys

Code Sample

heightInherited

Members

Code Sample

includeKeys

Code Sample

inputMask

Code Sample

inputNameInherited

Code Sample

localeInherited

Code Sample

maxLengthInherited

Code Sample

nullValueInherited

Code Sample

padChar

Code Sample

placeHolderInherited

Code Sample

preventSubmitOnEnterInherited

Code Sample

readOnlyInherited

Code Sample

regional

Code Sample

revertIfNotValidInherited

Code Sample

selectionOnFocusInherited

Members

Code Sample

spinWrapAroundInherited

Code Sample

suppressNotificationsInherited

Code Sample

tabIndexInherited

Code Sample

textAlignInherited

Members

Code Sample

toLowerInherited

Code Sample

toUpperInherited

Code Sample

unfilledCharsPrompt

Code Sample

validatorOptionsInherited

Code Sample

valueInherited

Code Sample

widthInherited

Members

Code Sample

blurInherited

allowNullValue
Inherited

disabled
Inherited

dropDownAnimationDuration
Inherited

dropDownAttachedToBody
Inherited

dropDownOnReadOnly
Inherited

height
Inherited

inputName
Inherited

locale
Inherited

maxLength
Inherited

nullValue
Inherited

placeHolder
Inherited

preventSubmitOnEnter
Inherited

readOnly
Inherited

revertIfNotValid
Inherited

selectionOnFocus
Inherited

spinWrapAround
Inherited

suppressNotifications
Inherited

tabIndex
Inherited

textAlign
Inherited

toLower
Inherited

toUpper
Inherited

validatorOptions
Inherited

value
Inherited

width
Inherited

blur
Inherited

focus
Inherited

keydown
Inherited

keypress
Inherited

keyup
Inherited

mousedown
Inherited

mousemove
Inherited

mouseout
Inherited

mouseover
Inherited

mouseup
Inherited

rendered
Inherited

rendering
Inherited

textChanged
Inherited

valueChanged
Inherited

valueChanging
Inherited

clearButton
Inherited

destroy
Inherited

displayValue
Inherited

editorContainer
Inherited

field
Inherited

getSelectedText
Inherited

getSelectionEnd
Inherited

getSelectionStart
Inherited

hasFocus
Inherited

hide
Inherited

inputName
Inherited

insert
Inherited

select
Inherited

setFocus
Inherited

show
Inherited

validate
Inherited

validator
Inherited