Migration from css textbox to javascript textbox in EJ2 TypeScript Textbox control

From v16.3.21 version, the textbox is provided as JavaScript control to achieve the floating label textbox with minimal code. You can find the available textbox properties, methods, and events in the API reference.

The following table describes the migration from CSS textbox to JavaScript textbox control.

Normal textbox

| Rendering mode | CSS textbox | JavaScript textbox control |
| ———————–| ———————————–| ——————————————- |
| Default rendering | <div class='e-input-group'>
<input class='e-input' type='text' placeholder='Enter Value'/>
</div> | <input id='default'/>

//To initiate the default textbox control
let inputObj: TextBox = new TextBox({
placeholder: 'Enter Value',
floatLabelType: 'Never'
});
inputObj.appendTo('#default'); |
| Textbox with clear button | <div class='e-input-group'>
<input class='e-input' placeholder='Enter Value' required='true'>
<span class='e-clear-icon'></span>
</div>

Note: You have to write action for clear button. | <input id='clear-input'/>

let inputObj: TextBox = new TextBox({
placeholder: 'Enter Value',
showClearButton: 'true',
floatLabelType: 'Never'
});
inputObj.appendTo('#clear-input'); |
| Validation states | <div class='e-input-group e-error'>
<input class='e-input' type='text' placeholder='Enter Value' />
</div>

Note: Textbox control consists of three types of validation rules such as success, warning, and error. | <input id='validation'/>

let inputObj: TextBox = new TextBox({
placeholder: 'Enter Value',
cssClass: 'e-error',
floatLabelType: 'Never'
});
inputObj.appendTo
('#validation'); |

Floating label textbox

| Rendering mode | CSS textbox | JavaScript textbox control |
| ———————–| ———————————–| ——————————————- |
| Default rendering | <div class='e-float-input'>
<input type='text' required />
<span class='e-float-line'></span>
<label class='e-float-text'>Enter Value</label>
</div> | <input id='default'/>

//To initiate the default textbox control with floating option
let inputObj: TextBox = new TextBox({
placeholder: 'Enter Value',
floatLabelType: 'Auto'
});
inputObj.appendTo('#default'); |
| Textbox with clear button | <div class='e-float-input e-input-group'>
<input type='text' required value= 'Clear Input' />
<span class='e-float-line'></span>
<label class='e-float-text'>Enter Value</label>
<span class='e-clear-icon'></span>
</div>

Note: You have to write action for clear button. | <input id='clear-input'/>

//To initiate the textbox control with clear button and floating option
let inputObj: TextBox = new TextBox({
placeholder: 'Enter Value',
showClearButton: 'true',
floatLabelType: 'Auto'
});
inputObj.appendTo('#clear-input'); |
| Validation states | <div class='e-float-input e-error'>
<input type='text' required />
<span class='e-float-line'></span>
<label class='e-float-text'>Enter Value</label>
</div>

Note: Textbox control consists of three types of validation rules such as success, warning, and error. | <input id='validation'/>

//To initiate the textbox control with validation and floating option
let inputObj: TextBox = new TextBox({
placeholder: 'Enter Value',
cssClass: 'e-error',
floatLabelType: 'Auto'
});
inputObj.appendTo
('#validation'); |