ui.igTextEditor
The igTextEditor control provides support for handling text user input. Options include specifying null text, plain text, password, and multiline modes. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.
For more details on the igTextEditor control API, refer to the base igEditor control’s API documentation.
The following code snippet demonstrates how to initialize the igTextEditor 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 igTextEditor 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 () { $("#textEditor").igTextEditor({ width: 160, placeHolder: "Enter Text" }); }); </script> </head> <body> <input id="textEditor" /> </body> </html>
Related Samples
Related Topics
Dependencies
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").igTextEditor({ allowNullValue : false }); //Get var allowNullValue = $(".selector").igTextEditor("option", "allowNullValue"); //Set $(".selector").igTextEditor("option", "allowNullValue", false);
-
buttonType
- Type:
- enumeration
- Default:
- none
Gets visibility of the spin, clear and drop-down button. That option can be set only on initialization. Combinations like 'dropdown,spin' or 'spin,clear' are supported too. Note! This option can not be set runtime.
Members
- dropdown
- Type:string
- A button to open/close the list is located on the right side of the editor.
- clear
- Type:string
- A button to clear the value is located on the right side of the editor.
- spin
- Type:string
- Spin buttons are located on the right side of the editor.
Code Sample
//Initialize $(".selector").igTextEditor({ buttonType : "dropdown" }); //Get var button = $(".selector").igTextEditor("option", "buttonType"); //Initialize multiple buttons $(".selector").igTextEditor({ buttonType : "dropdown,clear" });
-
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").igTextEditor({ disabled : false }); //Get var disabled = $(".selector").igTextEditor("option", "disabled"); //Set $(".selector").igTextEditor("option", "disabled", true);
-
dropDownAnimationDuration
- Type:
- number
- Default:
- 300
Gets/Sets show/hide drop-down list animation duration in milliseconds.
Code Sample
//Initialize $(".selector").igTextEditor({ dropDownAnimationDuration: 500 }); //Get var animationShowDuration= $(".selector").igTextEditor("option", "dropDownAnimationDuration"); //Set $(".selector").igTextEditor("option", "dropDownAnimationDuration", 500);
-
dropDownAttachedToBody
- Type:
- bool
- Default:
- false
Gets wheather the drop-down list element is attached to the body of the document, or to the editor container element.
If the option is set to false the editor will attach the drop-down list element to the editor container
If the option is set to true the editor will attach its drop-down list to as a child of the body.
Note! This option can not be set runtime.Code Sample
//Initialize $(".selector").igTextEditor({ dropDownAttachedToBody : true }); //Get var attachedToBody = $(".selector").igTextEditor("option", "dropDownAttachedToBody");
-
dropDownOnReadOnly
- Type:
- bool
- Default:
- false
Gets the ability to limit the editor to be used only as a 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").igTextEditor({ dropDownOnReadOnly : true }); //Get var readOnly = $(".selector").igTextEditor("option", "dropDownOnReadOnly");
-
dropDownOrientation
- Type:
- enumeration
- Default:
- auto
Gets/Sets the drop-down list opening orientation when the list gets open. If the option is set to auto the editor has priority to open the drop-down list bottom. If the space is not enough it tries to open the list top. If the space is not enough in both directions then the list gets opened at the bottom of the editor.
Members
- auto
- Type:string
- If the option is set to auto the editor has priority to open the drop-down list bottom. If the space is not enough it tries to open the list top. If the space is not enough in both directions then the list gets opened at the bottom of the editor.
- bottom
- Type:string
- The drop-down list is opened at the bottom of the editor.
- top
- Type:string
- The drop-down list is opened at the top of the editor.
Code Sample
//Initialize $(".selector").igTextEditor({ dropDownOrientation : "top" }); //Get var orientation = $(".selector").igTextEditor("option", "dropDownOrientation"); //Set $(".selector").igTextEditor("option", "dropDownOrientation", "bottom");
-
excludeKeys
- Type:
- string
- Default:
- null
Gets/Sets the ability of the editor to prevent entering specific characters from the keyboard or on paste.
Notes:
If both "excludeKeys" and "includeKeys" options are used, then "excludeKeys" has priority and includeKeys options is not respected.
The option is case sensitive! If the option is set runtime it's not applied on the current value.Code Sample
//Initialize $(".selector").igTextEditor({ excludeKeys: "AaBC" }); //Get var excludedKeys= $(".selector").igTextEditor("option", "excludeKeys"); //Set $(".selector").igTextEditor("option", "excludeKeys", "ABC");
-
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").igTextEditor({ height : 25 }); //Get var height = $(".selector").igTextEditor("option", "height"); //Set $(".selector").igTextEditor("option", "height", 25);
-
includeKeys
- Type:
- string
- Default:
- null
Gets/Sets the ability of the editor to allow entering only specific characters in the input-field from the keyboard and on paste.
Notes:
If both "excludeKeys" and "includeKeys" options are used, then "excludeKeys" has priority and includeKeys options is not respected.
The option is case sensitive! If the option is set runtime it's not applied on the current value.Code Sample
//Initialize $(".selector").igTextEditor({ includeKeys: "AaBC" }); //Get var includedKeys= $(".selector").igTextEditor("option", "includeKeys"); //Set $(".selector").igTextEditor("option", "includeKeys", "ABC");
-
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").igTextEditor({ inputName : "textField" }); //Get var inputName = $(".selector").igTextEditor("option", "inputName"); //Set $(".selector").igTextEditor("option", "inputName", "textField");
-
isLimitedToListValues
- Type:
- bool
- Default:
- false
Gets/Sets if the editor should only allow values from the list of items. Matching is case-insensitive.
Code Sample
//Initialize $(".selector").igTextEditor({ isLimitedToListValues : true }); //Get var limited = $(".selector").igTextEditor("option", "isLimitedToListValues"); //Set $(".selector").igTextEditor("option", "isLimitedToListValues", false);
-
language
Inherited- Type:
- string
- Default:
- "en"
Set/Get the locale language setting for the widget.
Code Sample
//Initialize $(".selector").igTextEditor({ language: "ja" }); // Get var language = $(".selector").igTextEditor("option", "language"); // Set $(".selector").igTextEditor("option", "language", "ja");
-
listItemHoverDuration
- Type:
- number
- Default:
- 0
Gets/Sets the hover/unhover animation duration of a drop-down list item.
Code Sample
//Initialize $(".selector").igTextEditor({ listItemHoverDuration : 100 }); //Get var hoverDuration = $(".selector").igTextEditor("option", "listItemHoverDuration"); //Set $(".selector").igTextEditor("option", "listItemHoverDuration", 100);
-
listItems
- Type:
- array
- Default:
- null
- Elements Type:
Gets/Sets list of items which are used as a source for the drop-down list.
Items in the list can be of type string.Code Sample
//Initialize $(".selector").igTextEditor({ listItems : [ "item 1", "item 2", "item 3" ] }); //Get var items = $(".selector").igTextEditor("option", "listItems"); //Set $(".selector").igTextEditor("option", "listItems", ["item 1", "item 2", "item 3"]);
-
listWidth
- Type:
- number
- Default:
- 0
Gets/Sets custom width of the drop-down list in pixels. If the value is equal to 0 or negative, then the width of editor is set as a drop-down width.
Code Sample
//Initialize $(".selector").igTextEditor({ listWidth : 200 }); //Get var width = $(".selector").igTextEditor("option", "listWidth"); //Set $(".selector").igTextEditor("option", "listWidth", 200);
-
locale
Inherited- Type:
- object
- Default:
- null
Set/Get the locale setting for the widget.
Code Sample
//Initialize $(".selector").igTextEditor({ locale: {} }); // Get var locale = $(".selector").igTextEditor("option", "locale"); // Set $(".selector").igTextEditor("option", "locale", {});
-
maxLength
- Type:
- number
- Default:
- null
Gets/Sets the maximum length of a text which can be entered by the user.
Negative values or 0 disables that behavior. If set at runtime the editor doesn't apply the option to the cuurent value.Code Sample
//Initialize $(".selector").igTextEditor({ maxLength : 25 }); //Get var textLength = $(".selector").igTextEditor("option", "maxLength"); //Set $(".selector").igTextEditor("option", "maxLength", 25);
-
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").igTextEditor({ nullValue : null }); //Get var nullValue = $(".selector").igTextEditor("option", "nullValue"); //Set $(".selector").igTextEditor("option", "nullValue", null);
-
placeHolder
- 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").igTextEditor({ placeHolder : "Enter Value" }); //Get var placeHolder = $(".selector").igTextEditor("option", "placeHolder"); //Set $(".selector").igTextEditor("option", "placeHolder", "Enter Value");
-
preventSubmitOnEnter
- Type:
- bool
- Default:
- false
Gets/Sets if the editor should prevent form submition when enter key is pressed.
Code Sample
//Initialize $(".selector").igTextEditor({ preventSubmitOnEnter: true }); //Get var preventSubmitOnEnter = $(".selector").igTextEditor("option", "preventSubmitOnEnter"); //Set $(".selector").igTextEditor("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").igTextEditor({ readOnly : true }); //Get var readOnly = $(".selector").igTextEditor("option", "readOnly"); //Set $(".selector").igTextEditor("option", "readOnly", true);
-
regional
Inherited- Type:
- enumeration
- Default:
- en-US
Set/Get the regional setting for the widget.
Code Sample
//Initialize $(".selector").igTextEditor({ regional: "ja" }); // Get var regional = $(".selector").igTextEditor("option", "regional"); // Set $(".selector").igTextEditor("option", "regional", "ja");
-
revertIfNotValid
- 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").igTextEditor({ revertIfNotValid : false }); //Get var revertIfNotValid = $(".selector").igTextEditor("option", "revertIfNotValid"); //Set $(".selector").igTextEditor("option", "revertIfNotValid", false);
-
selectionOnFocus
- 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").igTextEditor({ selectionOnFocus: "atStart" }); //Get var selectionOnFocus= $(".selector").igTextEditor("option", "selectionOnFocus"); //Set $(".selector").igTextEditor("option", "selectionOnFocus", "selectAll");
-
spinWrapAround
- Type:
- bool
- Default:
- false
Gets/Sets the ability of the editor to automatically move the dropdown list selection item from one end to the opposite side. When the last item is reached and spin down is performed, the first item gets selected and vice versa. This option has no effect there is no drop-down list.
Code Sample
//Initialize $(".selector").igTextEditor({ spinWrapAround : true }); //Get var spinAround = $(".selector").igTextEditor("option", "spinWrapAround"); //Set $(".selector").igTextEditor("option", "spinWrapAround", true);
-
suppressKeyboard
- Type:
- bool
- Default:
- false
Gets/Sets whether the onscreen keyboard (if available on device) should be shown when the dropdown button is clicked/tapped. This option prevents initial focus or removes it when the drop button is clicked/tapped.
Note: The option does not perform device detection so its behavior is always active if enabled.
Note: When drop down is opened the only way to close it will be using the drop down button.Code Sample
//Initialize $(".selector").igTextEditor({ suppressKeyboard : true }); //Get var readOnly = $(".selector").igTextEditor("option", "suppressKeyboard"); //Set $(".selector").igTextEditor("option", "suppressKeyboard", true);
-
suppressNotifications
- 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").igTextEditor({ suppressNotifications : true }); //Get var suppressNotifications = $(".selector").igTextEditor("option", "suppressNotifications"); //Set $(".selector").igTextEditor("option", "suppressNotifications", true);
-
tabIndex
Inherited- Type:
- number
- Default:
- null
Gets/Sets tabIndex attribute for the editor input.
Code Sample
//Initialize $('.selector').igTextEditor({ tabIndex: 1 }); //Get var tabIndex = $(".selector").igTextEditor("option", "tabIndex"); //Set $(".selector").igTextEditor("option", "tabIndex", 1);
-
textAlign
- 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").igTextEditor({ textAlign : "center" }); //Get var align = $(".selector").igTextEditor("option", "textAlign"); //Set $(".selector").igTextEditor("option", "textAlign", "center");
-
textMode
- Type:
- enumeration
- Default:
- text
Gets the text mode of the editor such as: single-line text editor, password editor or multiline editor. That option has effect only on initialization. If based element (selector) is TEXTAREA, then it is used as input-field.
Members
- text
- Type:string
- Single line text editor based on INPUT element is created.
- password
- Type:string
- Editor based on INPUT element with type password is created.
- multiline
- Type:string
- Multiline editor based on TEXTAREA element is created.
Code Sample
//Initialize $(".selector").igTextEditor({ textMode : "password" }); //Get var mode = $(".selector").igTextEditor("option", "textMode");
-
toLower
- 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").igTextEditor({ toLower : true }); //Get var toLower = $(".selector").igTextEditor("option", "toLower"); //Set $(".selector").igTextEditor("option", "toLower", true);
-
toUpper
- 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").igTextEditor({ toUpper : true }); //Get var toUpper = $(".selector").igTextEditor("option", "toUpper"); //Set $(".selector").igTextEditor("option", "toUpper", true);
-
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").igTextEditor({ validatorOptions : { successMessage: "Success", required: true, onchange: true, notificationOptions: { mode: "popover" } } }); //Get var validateOptions = $(".selector").igTextEditor("option", "validatorOptions"); //Set $(".selector").igTextEditor("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").igTextEditor({ value : "Some text" }); //Get var value = $(".selector").igTextEditor("option", "value"); //Set $(".selector").igTextEditor("option", "value", "Some text");
-
visibleItemsCount
- Type:
- number
- Default:
- 5
Gets the number of the items to be shown at once when the drop-down list get opened.
Notes:
This option is overwritten if the number of list items is less than the set value. In that case the drop-down list displays all the items.
This option can not be set runtime.Code Sample
//Initialize $(".selector").igTextEditor({ visibleItemsCount : 5 }); //Get var visibleItemsCount = $(".selector").igTextEditor("option", "visibleItemsCount");
-
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").igTextEditor({ width : 200 }); //Get var width = $(".selector").igTextEditor("option", "width"); //Set $(".selector").igTextEditor("option", "width", 200);
For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.
-
blur
Inherited- Cancellable:
- false
Fired when the input field of the editor loses focus.
Code Sample
//Delegate $(".selector").on("igtexteditorblur", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ blur: function (evt, ui) { ... } });
-
dropDownItemSelected
- Cancellable:
- false
Fired after an item in the drop down list is selected.
Code Sample
//Delegate $(".selector").on("igtexteditordropdownitemselected", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ dropDownItemSelected: function (evt, ui) { ... } });
-
dropDownItemSelecting
- Cancellable:
- true
Fired when an item in the drop down list is being selected.
-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
editorType: Object
Gets a reference to the editor container.
-
editorInputType: Object
Gets a reference to the editable input.
-
listType: Object
Gets a reference to the list contaier.
-
itemType: Object
Gets a reference to the list item which is about to be selected.
-
Code Sample
//Delegate $(".selector").on("igtexteditordropdownitemselecting", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ dropDownItemSelecting: function (evt, ui) { ... } });
-
dropDownListClosed
- Cancellable:
- false
Fired after the drop down is closed.
Code Sample
//Delegate $(".selector").on("igtexteditordropdownlistclosed", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ dropDownListClosed: function (evt, ui) { ... } });
-
dropDownListClosing
- Cancellable:
- true
Fired when the drop down is closing.
Code Sample
//Delegate $(".selector").on("igtexteditordropdownlistclosing", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ dropDownListClosing: function (evt, ui) { ... } });
-
dropDownListOpened
- Cancellable:
- true
Fired after the drop down is opened.
Code Sample
//Delegate $(".selector").on("igtexteditordropdownlistopened", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ dropDownListOpened: function (evt, ui) { ... } });
-
dropDownListOpening
- Cancellable:
- true
Fired when the drop down is opening.
Code Sample
//Delegate $(".selector").on("igtexteditordropdownlistopening", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ dropDownListOpening: function (evt, ui) { ... } });
-
focus
Inherited- Cancellable:
- false
Fired when the input field of the editor gets focus.
Code Sample
//Delegate $(".selector").on("igtexteditorfocus", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ focus: function (evt, ui) { ... } });
-
keydown
Inherited- Cancellable:
- true
Fired on keydown event.
Return false in order to cancel key action.Code Sample
//Delegate $(".selector").on("igtexteditorkeydown", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ keydown: function (evt, ui) { ... } });
-
keypress
Inherited- Cancellable:
- true
Fired on keypress event.
Return false in order to cancel key action.-
evtType: Event
JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
elementType: Object
Gets a reference to the event target.
-
editorInputType: Object
Gets a reference to the editor input field.
-
keyType: Object
Gets the value of the keyCode.
-
originalEventType: Object
Gets a reference to the event object of the browser.
-
Code Sample
//Delegate $(".selector").on("igtexteditorkeypress", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ keypress: function (evt, ui) { ... } });
-
keyup
Inherited- Cancellable:
- false
Fired on keyup event.
-
evtType: Event
JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
elementType: Object
Gets a reference to the event target.
-
editorInputType: Object
Gets a reference to the editor input field.
-
keyType: Object
Gets the value of the keyCode.
-
originalEventType: Object
Gets a reference to the event object of the browser.
-
Code Sample
//Delegate $(".selector").on("igtexteditorkeyup", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ keyup: function (evt, ui) { ... } });
-
mousedown
Inherited- Cancellable:
- true
Fired on mousedown event.
Code Sample
//Delegate $(".selector").on("igtexteditormousedown", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ mousedown: function (evt, ui) { ... } });
-
mousemove
Inherited- Cancellable:
- false
Fired on mousemove at any part of editor including the drop-down list.
Code Sample
//Delegate $(".selector").on("igtexteditormousemove", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ mousemove: function (evt, ui) { ... } });
-
mouseout
Inherited- Cancellable:
- false
Fired on mouseleave at any part of editor including the drop-down list.
Code Sample
//Delegate $(".selector").on("igtexteditormouseout", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ mouseout: function (evt, ui) { ... } });
-
mouseover
Inherited- Cancellable:
- false
Fired on mouseover at any part of editor including the drop-down list.
Code Sample
//Delegate $(".selector").on("igtexteditormouseover", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ mouseover: function (evt, ui) { ... } });
-
mouseup
Inherited- Cancellable:
- false
Fired on mouseup event.
Code Sample
//Delegate $(".selector").on("igtexteditormouseup", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ mouseup: function (evt, ui) { ... } });
-
rendered
Inherited- Cancellable:
- false
Fired after rendering of the editor has finished.
Code Sample
//Delegate $(".selector").on("igtexteditorrendered", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ rendered: function (evt, ui) { ... } });
-
rendering
Inherited- Cancellable:
- true
Fired before rendering of the editor has finished.
Code Sample
//Delegate $(".selector").on("igtexteditorrendering", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ rendering: function (evt, ui) { ... } });
-
textChanged
- Cancellable:
- false
Fired after the editor's text has been changed. It can be raised when keyUp event occurs,
when the clear button is clicked or when an item from a list is selected.Code Sample
//Delegate $(".selector").on("igtexteditortextchanged", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ textChanged: function (evt, ui) { ... } });
-
valueChanged
Inherited- Cancellable:
- false
Fired after the editor value is changed. It can be raised after loosing focus or on spin events.
-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
editorInputType: Object
Gets the editor input.
-
newValueType: Object
Gets the value entered from the user after internal formatting. The argument type might differ depending on the editor type.
-
originalValueType: Object
Gets the value entered from the user before internal formatting. The argument type might differ depending on the editor type.
-
Code Sample
//Delegate $(".selector").on("igtexteditorvaluechanged", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ valueChanged: function (evt, ui) { ... } });
-
valueChanging
Inherited- Cancellable:
- true
Fired before changing the editor's value.
Return false in order to cancel change.
It can be raised after loosing focus or on spin events.-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
editorInputType: Object
Gets the editor input.
-
newValueType: Object
Gets the editor's new value. The argument type might differ depending on the editor type.
-
oldValueType: Object
Gets the editor's old value. The argument type might differ depending on the editor type.
-
Code Sample
//Delegate $(".selector").on("igtexteditorvaluechanging", function (evt, ui) { ... }); //Initialize $(".selector").igTextEditor({ valueChanging: function (evt, ui) { ... } });
-
changeGlobalLanguage
Inherited- .igTextEditor( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
$(".selector").igTextEditor("changeGlobalLanguage");
-
changeGlobalRegional
Inherited- .igTextEditor( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
$(".selector").igTextEditor("changeGlobalRegional");
-
changeLocale
- .igTextEditor( "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").igTextEditor("changeLocale");
-
clearButton
- .igTextEditor( "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").igTextEditor("clearButton");
-
destroy
Inherited- .igTextEditor( "destroy" );
Destroys the widget.
Code Sample
$(".selector").igTextEditor("destroy");
-
displayValue
- .igTextEditor( "displayValue" );
- Return Type:
- string
- Return Type Description:
- Visible text of the editor.
Gets the visible text in the editor.
Code Sample
$(".selector").igTextEditor("displayValue");
-
dropDownButton
- .igTextEditor( "dropDownButton" );
- Return Type:
- jquery
- Return Type Description:
- Returns reference to jquery object.
Returns a reference to the drop-down button UI element of the editor.
Code Sample
var button = $(".selector").igTextEditor("dropDownButton");
-
dropDownContainer
- .igTextEditor( "dropDownContainer" );
- Return Type:
- jquery
- Return Type Description:
- Returns reference to jquery object.
Gets reference to jquery object which is used as container of drop-down list.
Code Sample
$(".selector").igTextEditor("dropDownContainer");
-
dropDownVisible
- .igTextEditor( "dropDownVisible" );
- Return Type:
- bool
- Return Type Description:
- The visibility state of the drop down.
Returns if the drop-down list is visible.
Code Sample
var visible = $(".selector").igTextEditor("dropDownVisible");
-
editorContainer
Inherited- .igTextEditor( "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").igTextEditor("editorContainer");
-
field
Inherited- .igTextEditor( "field" );
- Return Type:
- jquery
- Return Type Description:
- The visual editor element.
Gets the input element of the editor.
Code Sample
$(".selector").igTextEditor("field");
-
findListItemIndex
- .igTextEditor( "findListItemIndex", text:string, [matchType:object] );
- Return Type:
- number
- Return Type Description:
- Returns index of the found item.
Finds index of list item by text that matches with the search parameters.
- text
- Type:string
- The text to search for in the drop down list.
- matchType
- Type:object
- Optional
- The rule that is applied for searching the text.
Code Sample
var item = $(".selector").igTextEditor("findListItemIndex");
-
getSelectedListItem
- .igTextEditor( "getSelectedListItem" );
- Return Type:
- jquery
- Return Type Description:
- Selected list item.
Gets the selected list item.
Code Sample
var selectedItem = $(".selector").igTextEditor("getSelectedListItem");
-
getSelectedText
- .igTextEditor( "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").igTextEditor("getSelectedText");
-
getSelectionEnd
- .igTextEditor( "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").igTextEditor("getSelectionEnd");
-
getSelectionStart
- .igTextEditor( "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").igTextEditor("getSelectionStart");
-
hasFocus
Inherited- .igTextEditor( "hasFocus" );
- Return Type:
- bool
- Return Type Description:
- Returns if the editor is focused or not.
Gets whether the editor has focus.
Code Sample
$(".selector").igTextEditor("hasFocus");
-
hide
Inherited- .igTextEditor( "hide" );
Hides the editor.
Code Sample
$(".selector").igTextEditor("hide");
-
hideDropDown
- .igTextEditor( "hideDropDown" );
Hides the drop down list.
Code Sample
$(".selector").igTextEditor("hideDropDown");
-
inputName
Inherited- .igTextEditor( "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").igTextEditor("inputName", "checkbox");
-
insert
- .igTextEditor( "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').igTextEditor({ blur: function (evt, ui) { // insert 0 as the user leaves the field ui.owner.insert("0"); } }); $(".selector").igTextEditor("insert", "20");
-
isValid
Inherited- .igTextEditor( "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").igTextEditor("isValid");
-
select
- .igTextEditor( "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").igTextEditor("select", 2, 4);
-
selectedListIndex
- .igTextEditor( "selectedListIndex", [index:number] );
- Return Type:
- number
- Return Type Description:
- Returns the selected index.
Gets the index of the selected list item. Sets selected item by index.
- index
- Type:number
- Optional
- The index of the item that needs to be selected.
Code Sample
$(".selector").igTextEditor("selectedListIndex", 1); var selectedIndex = $(".selector").igTextEditor("selectedListIndex");
-
setFocus
Inherited- .igTextEditor( "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").igTextEditor("setFocus", 200);
-
show
Inherited- .igTextEditor( "show" );
Shows the editor.
Code Sample
$(".selector").igTextEditor(("show");
-
showDropDown
- .igTextEditor( "showDropDown" );
Shows the drop down list.
Code Sample
$(".selector").igTextEditor("showDropDown");
-
spinDown
- .igTextEditor( "spinDown" );
Selects the next item from the drop-down list.
Code Sample
$(".selector").igTextEditor("spinDown");
-
spinDownButton
- .igTextEditor( "spinDownButton" );
- Return Type:
- jquery
- Return Type Description:
- The jQuery object representing the spin down UI element of the editor.
Returns a reference to the spin down UI element of the editor.
Code Sample
var button = $(".selector").igTextEditor("spinDownButton");
-
spinUp
- .igTextEditor( "spinUp" );
Selects the previous item from the drop-down list.
Code Sample
$(".selector").igTextEditor("spinUp");
-
spinUpButton
- .igTextEditor( "spinUpButton" );
- Return Type:
- jquery
- Return Type Description:
- The jQuery object representing the spin up UI element of the editor.
Returns a reference to the spin up UI element of the editor.
Code Sample
var button = $(".selector").igTextEditor("spinUpButton");
-
validate
Inherited- .igTextEditor( "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").igTextEditor("validate");
-
validator
Inherited- .igTextEditor( "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").igTextEditor("validator");
-
value
Inherited- .igTextEditor( "value", newValue:object );
- newValue
- Type:object
Code Sample
$(".selector").igTextEditor("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'.