TextInput

TextInput component is decorator for input elements.

Table of Contents

  1. Default selectors
  2. HTML Examples
  3. Options
  4. Methods

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>