TextBox

Represents the TextBox component that allows the user to enter the values based on it’s type.

<input name='images' id='textbox'/>

<script>
  var textboxObj = new TextBox();
  textboxObj.appendTo('#textbox');
</script>

Properties

autocomplete

string

Specifies whether the browser is allow to automatically enter or select a value for the textbox. By default, autocomplete is enabled for textbox. Possible values are: on - Specifies that autocomplete is enabled. off - Specifies that autocomplete is disabled.

Defaults to ‘on’

cssClass

string

Specifies the CSS class value that is appended to wrapper of Textbox.

Defaults to ”

enablePersistence

boolean

Enable or disable persisting TextBox state between page reloads. If enabled, the value state will be persisted.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

Specifies a Boolean value that indicates whether the TextBox allow user to interact with it.

Defaults to true

floatLabelType

FloatLabelType

Specifies the floating label behavior of the TextBox that the placeholder text floats above the TextBox based on the below values. Possible values are:

• Never - The placeholder text should not be float ever.
• Always - The placeholder text floats above the TextBox always.
• Auto - The placeholder text floats above the TextBox while focusing or enter a value in Textbox.

Defaults to Never

htmlAttributes

{ : }

You can add the additional html attributes such as disabled, value etc., to the element. If you configured both property and equivalent html attribute then the component considers the property value.

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

import { TextBox } from '@syncfusion/ej2-inputs';

let textbox: TextBox = new TextBox({
  htmlAttributes: { name: "username", type: "password", maxlength:"8" }
});
textbox.appendTo('#textbox');

Defaults to {}

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

multiline

boolean

Specifies a boolean value that enable or disable the multiline on the TextBox. The TextBox changes from single line to multiline when enable this multiline mode.

Defaults to false

placeholder

string

Specifies the text that is shown as a hint/placeholder until the user focus or enter a value in Textbox. The property is depending on the floatLabelType property.

Defaults to null

readonly

boolean

Specifies the boolean value whether the TextBox allows user to change the text.

Defaults to false

showClearButton

boolean

Specifies a Boolean value that indicates whether the clear button is displayed in Textbox.

Defaults to false

type

string

Specifies the behavior of the TextBox such as text, password, email, etc.

Defaults to ‘text’

value

string

Sets the content of the TextBox.

Defaults to null

width

number | string

Specifies the width of the Textbox component.

Defaults to null

Methods

addAttributes

Adding the multiple attributes as key-value pair to the TextBox element.

Returns void

addEventListener

Adds the handler to the given event listener.

Returns void

addIcon

Adding the icons to the TextBox component.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also, it maintains the initial TextBox element from the DOM.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

focusIn

Sets the focus to widget for interaction.

Returns void

focusOut

Remove the focus from widget, if the widget is in focus state.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getPersistData

Gets the properties to be maintained in the persisted state.

Returns string

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeAttributes

Removing the multiple attributes as key-value pair to the TextBox element.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

blur

EmitType<FocusOutEventArgs>

Triggers when the TextBox has focus-out.

change

EmitType<ChangedEventArgs>

Triggers when the content of TextBox has changed and gets focus-out.

created

EmitType<Object>

Triggers when the TextBox component is created.

destroyed

EmitType<Object>

Triggers when the TextBox component is destroyed.

focus

EmitType<FocusInEventArgs>

Triggers when the TextBox gets focus.

input

EmitType<InputEventArgs>

Triggers each time when the value of TextBox has changed.