TextInput
TextInput component is decorator for input elements.Table of Contents
Default Selectors
By default, all elements having the following types are TextInput:
- INPUT with type "text" or "number" or "password" or "email" or "url" or "tel"
- TEXTAREA
- INPUT elements with class ui-text-input
HTML Examples
Create simple text input on INPUT element with clear button
<label for="texttype">Text Input:</label> <input type="text" name="texttype" id="texttype" placeholder="Input text here" data-clear-btn="true"/>
Create simple text input on TEXTAREA element
<label for="textarea">Text Area:</label> <textarea type="text" name="textarea" id="textarea" placeholder="Input text here"></textarea>
Options
| Option | Input type | Default value | Description |
|---|---|---|---|
| data-clear-btn | boolean | false | Indicates whether the clear button will be shown. |
| data-text-line | boolean | true | Indicates whether the text underline will be shown. |
Methods
Summary
| Method | Description |
|---|---|
TextInput enable ( ) |
Enables the TextInput component. |
TextInput disable ( ) |
Disables the TextInput component. |
enable-
Enables the TextInput component.
TextInput enable ( )
This method removes the disabled attribute on input and changes the look of input to enabled state.
Return value:
Type Description TextInput The enabled TextInput Code example:
<input type="text" name="texttype" id="texttype" /> <script> var inputElement = document.getElementById("texttype"), textInputWidget = tau.widget.TextInput(); textInputWidget.enable(); </script> disable-
Disables the TextInput component.
TextInput disable ( )
This method adds the disabled attribute on input and changes the look of input to disable state.
Return value:
Type Description TextInput The disabled TextInput Code example:
<input type="text" name="texttype" id="texttype" /> <script> var inputElement = document.getElementById("texttype"), textInputWidget = tau.widget.TextInput(); textInputWidget.disable(); </script>