Configuration

An object defining configuration options for the dxTextBox widget.

changeAction

An action performed after the change DOM event has been raised for the current input element.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused the action's execution.
Default Value: null

Assign a function to perform a custom action when a change within the widget's input element is committed by an end user.

Alternatively, you can assign a URL to which the browser will navigate when a change within the widget's input element is committed by an end user.

copyAction

An action performed when the copy DOM event has been fired.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused the action's execution.
Default Value: null

Assign a function to perform a custom action after the widget's input has been copied.

Alternatively, you can assign a URL to which the browser will navigate after the widget's input is copied.

cutAction

An action performed when the cut DOM event has been fired.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action after the widget's input has been cut.

Alternatively, you can assign a URL to which the browser will navigate after the widget's input is cut.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

Show Example:
jQuery

enterKeyAction

An action performed when the Enter key has been pressed.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action after a key has been entered within the widget's input element.

Alternatively, you can assign a URL to which the browser will navigate after a key is entered within the widget's input element.

focusInAction

An action performed when the focusin DOM event has been raised for the current input element.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action after the widget's input has been focused.

Alternatively, you can assign a URL to which the browser will navigate after the widget's input is focused.

focusOutAction

An action performed when the focusout DOM event has been raised for the current input element.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action after the widget's input element has lost focus.

Alternatively, you can assign a URL to which the browser will navigate after the widget's input element loses focus.

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget height in pixels.
  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget height. For example, see the following code.

    JavaScript
    height: function () { 
        return baseHeight - 10 + "%";
    }

hoverStateEnabled

A Boolean value specifying whether or not the widget changes its state when being hovered by an end user.

Type: Boolean
Default Value: true

inputAction

An action performed when the input DOM event has been fired.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when a value within the widget's input element is changed by an end user.

Alternatively, you can assign a URL to which the browser will navigate when a value within the widget's input element is changed by an end user.

keyDownAction

An action performed when the keydown DOM event has been raised for the current input element.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when a key is pressed down within the widget's input element.

Alternatively, you can assign a URL to which the browser will navigate when a key is pressed down within the widget's input element.

keyPressAction

An action performed when the keypress DOM event has been raised for the current input element.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when the keypress DOM event has been raised for the current input element.

Alternatively, you can assign a URL to which the browser will navigate when the keypress DOM event has been raised for the current input element.

keyUpAction

An action performed when the keyup DOM event has been raised for the current input element.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when a key is released within the widget's input element.

Alternatively, you can assign a URL to which the browser will navigate when a key is released within the widget's input element.

maxLength

Specifies the maximum number of characters you can enter into the textbox.

Type: String|Number
Default Value: null

If the number of entered characters reaches the value assigned to this option, the widget does not allow you to enter any more characters.

Show Example:
jQuery

mode

The "mode" attribute value of the actual HTML input element representing the text box.

Type: String
Default Value: "text"
Accepted Values: 'text'|'email'|'search'|'tel'|'url'|'password'

The value of this option affects the set of keyboard buttons shown on the mobile device when the widget gets focus. In addition, the following mode values add visual features to the widget:

  • 'search' - the text box contains the 'X' button, which clears the text box contents
  • 'password' - the text box shows a password character instead of the actual characters typed

pasteAction

An action performed when the paste DOM event has been fired.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action after the widget's input has been pasted.

Alternatively, you can assign a URL to which the browser will navigate after the widget's input is pasted.

placeholder

The text displayed by the widget when the widget value is empty.

Type: String
Default Value: ""

readOnly

A Boolean value specifying whether or not the widget is read-only.

Type: Boolean
Default Value: false

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

showClearButton

Specifies whether to display the Clear button in the widget.

Type: Boolean
Default Value: false

The Clear button sets the widget value to undefined.

value

Specifies the current value displayed by the widget.

Type: String
Default Value: ""

valueChangeAction

An action performed when the editor value changes.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: Object
Returns the widget's new value.
previousValue: Object
Returns the widget's previous value.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: undefined

Assign a function to perform a custom action when the editor value changes.

Alternatively, you can assign a URL to which the browser will navigate when the editor value changes.

valueChangeEvent

Specifies DOM event names that update a widget's value.

Type: String
Default Value: "change"

The option takes on a string value representing a DOM event name or several DOM event names separated by a space. You can assign any DOM event name to this option. For example, "change", "blur", "input", "keyup", etc.

valueUpdateAction

Deprecated

Use the valueChangeAction option instead.

An action performed when the widget value is updated.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: Object
Returns the widget's value.
jQueryEvent: jQuery.Event
Returns a jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when the widget value is updated.

Alternatively, you can assign a URL to which the browser will navigate when the widget value is updated.

valueUpdateEvent

Deprecated

Use the valueChangeEvent option instead.

Specifies DOM event names that cause the widget value to update.

Type: String
Default Value: "change"

Show Example:
jQuery

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }