ui.igMaskEditor

ui.igMaskEditor_image

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

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui-1.9.0.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.scroll.js
infragistics.ui.validator.js

Inherits

  • allowNullValue
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets whether the editor value can become null.
    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 the clear button. That option can be set only on initialization.

    Members

    • clear
    • Type:string
    • A button to clear the value is located on the right side of the editor.

    Code Sample

     
    				//Initialize
    				$(".selector").igMaskEditor({
    					buttonType : "clear"
    				});
    				//Get
    				var button = $(".selector").igMaskEditor("option", "buttonType");
    				 
  • dataMode

    Type:
    enumeration
    Default:
    allText

    It affects the value of the control (value method/option and submitted in forms). It defines what the value should contain from text, unfilled prompts and literals. The default is allText and when used value method/option returns the text entered, all prompts (positions) and literals.

    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");
    				 
  • disabled
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets the disabled attribute for the input. If set to true the input is disabled, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is not submitted.

    Code Sample

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

    Type:
    string
    Default:
    " "

    Gets/Sets character which is used as replacement of not-filled required position in mask when application calls get for the value 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 the height of the control.

    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 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 emptyChar 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

    Gets/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");
    			 
  • language
    Inherited

    Type:
    string
    Default:
    "en"

    Set/Get the locale language setting for the widget.

    Code Sample

     
    					//Initialize
    				$(".selector").igMaskEditor({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igMaskEditor("option", "language");
    
    				// Set
    				$(".selector").igMaskEditor("option", "language", "ja");
    			 
  • locale
    Inherited

    Type:
    object
    Default:
    null

    Set/Get the locale setting for the widget.

    Code Sample

     
    					//Initialize
    				$(".selector").igMaskEditor({
    					locale: {}
    				});
    
    				// Get
    				var locale = $(".selector").igMaskEditor("option", "locale");
    
    				// Set
    				$(".selector").igMaskEditor("option", "locale", {});
    			 
  • nullValue
    Inherited

    Type:
    enumeration
    Default:
    null

    Gets/Sets 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/Sets 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 the text which appears in the editor when it has no focus and the "value" 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

    Gets/Sets if the editor should prevent form submition when enter key is pressed.

    Code Sample

     
    				//Initialize
    				$(".selector").igMaskEditor({
    						preventSubmitOnEnter: true
    				});
    
    				//Get
    				var preventSubmitOnEnter = $(".selector").igMaskEditor("option", "preventSubmitOnEnter");
    
    				//Set
    				$(".selector").igMaskEditor("option", "preventSubmitOnEnter", true);
    			 
  • readOnly
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets the readonly attribute for the input. If set to true the input is readonly, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is submitted.

    Code Sample

     
    				//Initialize
    				$(".selector").igMaskEditor({
    					readOnly : true
    				});
    
    				//Get
    				var readOnly = $(".selector").igMaskEditor("option", "readOnly");
    
    				//Set
    				$(".selector").igMaskEditor("option", "readOnly", true);
    			 
  • regional
    Inherited

    Type:
    enumeration
    Default:
    en-US

    Set/Get the regional setting for the widget.

    Code Sample

     
    				//Initialize
    				$(".selector").igMaskEditor({
    					regional: "ja"
    				});
    				// Get
    				var regional = $(".selector").igMaskEditor("option", "regional");
    				// Set
    				$(".selector").igMaskEditor("option", "regional", "ja");
    			 
  • revertIfNotValid
    Inherited

    Type:
    bool
    Default:
    true

    Gets/Sets if the editor should revert it's value to the previously valid value in case the value on blur, or enter key is not valid. If the opiton is set to false, editor calls clear functionality.

    Code Sample

     
    				//Initialize
    				$(".selector").igMaskEditor({
    					revertIfNotValid : false
    				});
    
    				//Get
    				var revertIfNotValid = $(".selector").igMaskEditor("option", "revertIfNotValid");
    
    				//Set
    				$(".selector").igMaskEditor("option", "revertIfNotValid", false);
    			 
  • selectionOnFocus
    Inherited

    Type:
    enumeration
    Default:
    selectAll

    Gets/Sets 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 the browser default behavior.

    Code Sample

     
    					//Initialize
    					$(".selector").igMaskEditor({
    						selectionOnFocus: "atStart"
    					});
    					//Get
    					var selectionOnFocus= $(".selector").igMaskEditor("option", "selectionOnFocus");
    					//Set
    					$(".selector").igMaskEditor("option", "selectionOnFocus", "selectAll");
    					 
  • suppressNotifications
    Inherited

    Type:
    bool
    Default:
    false

    Disables/Enables 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 tabIndex attribute for the editor input.

    Code Sample

     
    			  //Initialize
    			  $('.selector').igMaskEditor({
    				  tabIndex: 1
    			  });
    
    			  //Get
    			  var tabIndex = $(".selector").igMaskEditor("option", "tabIndex");
    
    			  //Set
    			  $(".selector").igMaskEditor("option", "tabIndex", 1);
    			   
  • textAlign
    Inherited

    Type:
    enumeration
    Default:
    left

    Gets/Sets the horizontal alignment of the text in the editor.

    Members

    • left
    • Type:string
    • The text into the input gets aligned to the left.
    • right
    • Type:string
    • The text into the input gets aligned to the right.
    • center
    • Type:string
    • The text into the input gets aligned to the center.

    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 the ability to convert the input characters to lower case (true) or keeps the characters as they are (false). The option has effect only while keyboard entries and paste.
    Note! When the option is set at runtime the editor is not changing the current value.

    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 the ability to convert the input characters to upper case (true) or keeps the characters as they are (false). The option has effect only while keyboard entries and paste.
    Note! When the option is set at runtime the editor is not changing the current value.

    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");
    				 
  • validatorOptions
    Inherited

    Type:
    object
    Default:
    null

    Gets/Sets options supported by the igValidator widget.
    Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors,
    while the corresponding options of the editor prevent values violating the defined rules 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

    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 the width of the control.

    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 arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditorblur", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					blur: function (evt, ui) {
    						...
    					}
    				});
    				 
  • focus
    Inherited

    Cancellable:
    false

    Event which is raised when input field of editor gets focus.
    Function takes arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditorfocus", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					focus: function (evt, ui) {
    						...
    					}
    				});
    				 
  • 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

     
    				$(".selector").on("igmaskeditorkeydown", function (evt, ui) {
    					...
    				});
    
    				//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.

    Code Sample

     
    				$(".selector").on("igmaskeditorkeypress", function (evt, ui) {
    					...
    				});
    
    				//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

     
    				$(".selector").on("igmaskeditorkeyup", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					keyup: function (evt, ui) {
    						...
    					}
    				});
    				 
  • mousedown
    Inherited

    Cancellable:
    false

    Event which is raised on mousedown event.
    Function takes arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditormousedown", function (evt, ui) {
    					...
    				});
    
    				//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 ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditormousemove", function (evt, ui) {
    					...
    				});
    
    				//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 ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditormouseout", function (evt, ui) {
    					...
    				});
    
    				//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 ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditormouseover", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					mouseover: function (evt, ui) {
    						...
    					}
    				});
    				 
  • mouseup
    Inherited

    Cancellable:
    false

    Event which is raised on mouseup event.
    Function takes arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.element to obtain a reference to the event target.
    Use ui.editorInput to get a reference to the editor field.

    Code Sample

     
    				$(".selector").on("igmaskeditormouseup", function (evt, ui) {
    					...
    				});
    
    				//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

     
    				$(".selector").on("igmaskeditorrendered", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					rendered: function (evt, ui) {
    						...
    					}
    				});
    				 
  • 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

     
    				$(".selector").on("igmaskeditorrendering", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					rendering: function (evt, ui) {
    						...
    					}
    				});
    				 
  • textChanged
    Inherited

    Cancellable:
    false

    Event which is raised after text in the editor was changed. It can be raised when keyUp event occurs,
    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

     
    				$(".selector").on("igmaskeditortextchanged", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					textChanged: function (evt, ui) {
    					...
    					}
    				});
    				 
  • valueChanged
    Inherited

    Cancellable:
    false

    Event which is raised after the editor value is changed. It can be raised after loosing 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 value entered from the user after internal formatting.
    Use ui.originalValue to obtain the value entered from the user before internal formatting.
    Use ui.editorInput to obtain reference to the editor input.

    Code Sample

     
    				$(".selector").on("igmaskeditorvaluechanged", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					valueChanged: function (evt, ui) {
    						...
    					}
    				});
    				 
  • valueChanging
    Inherited

    Cancellable:
    true

    Event which is raised before the editor value is changed.
    Return false in order to cancel change.
    It can be raised after loosing 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

     
    				$(".selector").on("igmaskeditorvaluechanging", function (evt, ui) {
    					...
    				});
    
    				//Initialize
    				$(".selector").igMaskEditor({
    					valueChanging: function (evt, ui) {
    						...
    					}
    				});
    				 
  • changeGlobalLanguage
    Inherited

    .igMaskEditor( "changeGlobalLanguage" );

    Changes the widget language to global language. Global language is the value in $.ig.util.language.

    Code Sample

     
    				$(".selector").igMaskEditor("changeGlobalLanguage");
    			 
  • changeGlobalRegional
    Inherited

    .igMaskEditor( "changeGlobalRegional" );

    Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.

    Code Sample

     
    				$(".selector").igMaskEditor("changeGlobalRegional");
    			 
  • changeLocale
    Inherited

    .igMaskEditor( "changeLocale" );

    Changes the all locales into the widget element to the language specified in options.language
    Note that this method is for rare scenarios, see language or locale option setter.

    Code Sample

     
    				$(".selector").igMaskEditor("changeLocale");
    			 
  • clearButton
    Inherited

    .igMaskEditor( "clearButton" );
    Return Type:
    jquery
    Return Type Description:
    Returns a reference to the jquery object.

    Returns a reference to the clear button UI element of the editor.

    Code Sample

     
    			var button =  $(".selector").igMaskEditor("clearButton");
    			 
  • destroy
    Inherited

    .igMaskEditor( "destroy" );

    Destroys the widget.

    Code Sample

     
    					$(".selector").igMaskEditor("destroy");
    				 
  • displayValue
    Inherited

    .igMaskEditor( "displayValue" );
    Return Type:
    string
    Return Type Description:
    Visible text of the editor.

    Gets the 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 a reference to the jQuery element that wraps the editor.

    Code Sample

     
    			$(".selector").igMaskEditor("editorContainer");
    			 
  • field
    Inherited

    .igMaskEditor( "field" );
    Return Type:
    jquery
    Return Type Description:
    The visual editor element.

    Gets the input element of the editor.

    Code Sample

     
    			$(".selector").igMaskEditor("field");
    			 
  • getSelectedText
    Inherited

    .igMaskEditor( "getSelectedText" );
    Return Type:
    string
    Return Type Description:
    Selected text in editor.

    Gets the selected text from the editor in edit mode. This can be done inside key event handlers, like keydown or keyup. This method can be used only when the editor is focused. If you invoke this method in display mode, when the editor input is blurred, the returned value will be an empty string.

    Code Sample

     
    			var text =  (".selector").igMaskEditor("getSelectedText");
    			 
  • getSelectionEnd
    Inherited

    .igMaskEditor( "getSelectionEnd" );
    Return Type:
    number
    Return Type Description:
    End index of the selected text in the editor.

    Gets the end index of the selected text in the editor.

    Code Sample

     
    			var intex = $(".selector").igMaskEditor("getSelectionEnd");
    			 
  • getSelectionStart
    Inherited

    .igMaskEditor( "getSelectionStart" );
    Return Type:
    number
    Return Type Description:
    Start index of the selected text in the editor.

    Gets the start index of the selected text in the editor.

    Code Sample

     
    			var intex = $(".selector").igMaskEditor("getSelectionStart");
    			 
  • hasFocus
    Inherited

    .igMaskEditor( "hasFocus" );
    Return Type:
    bool
    Return Type Description:
    Returns if the editor is focused or not.

    Gets whether the editor has focus.

    Code Sample

     
    				$(".selector").igMaskEditor("hasFocus");
    			 
  • hide
    Inherited

    .igMaskEditor( "hide" );

    Hides the 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", "checkbox");
    				 
  • insert
    Inherited

    .igMaskEditor( "insert", string:string );

    Inserts the text at the location of the caret or over the current selection. If the editor is focused the method will insert the text over the current selection. If the editor is not focused the method will set the text as value of the editor.
    Note: The method raises textChanged event.

    • string
    • Type:string
    • The string to be inserted.

    Code Sample

     
    				$('.selector').igMaskEditor({
    					blur: function (evt, ui) {
    						// insert 0 as the user leaves the field
    						ui.owner.insert("0");
    					}
    				});
    				$(".selector").igMaskEditor("insert", "20");
    				 
  • isValid

    .igMaskEditor( "isValid" );
    Return Type:
    bool
    Return Type Description:
    Whether editor value is valid or not.

    Checks if the value in the editor is valid. Note: This function will not trigger automatic notifications.

    Code Sample

     
    				var isValid = $(".selector").igMaskEditor("isValid");
    			 
  • select
    Inherited

    .igMaskEditor( "select", start:number, end:number );

    Selects the text between start and end indices in the editor. If the parameters are equal, then the method sets location of caret. The method has effect only when the 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] );

    Sets focus to the editor after the specified delay.

    • delay
    • Type:number
    • Optional
    • The delay before focusing the editor.

    Code Sample

     
    				$(".selector").igMaskEditor("setFocus", 200);
    				 
  • show
    Inherited

    .igMaskEditor( "show" );

    Shows the 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 for the editor. If validatorOptions are set will also call validate on the igValidator.

    Code Sample

     
    				var valid = $(".selector").igMaskEditor("validate");
    				 
  • validator
    Inherited

    .igMaskEditor( "validator" );
    Return Type:
    object
    Return Type Description:
    Returns reference to igValidator or null.

    Gets a reference to igValidator used by the editor.

    Code Sample

     
    					var validator = $(".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'.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.