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

8 May 20231 minute to read

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
var inputobj = new ej.inputs.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'/>

var inputobj = new ej.inputs.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'/>

var inputobj = new ej.inputs.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
var inputobj = new ej.inputs.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
var inputobj = new ej.inputs.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
var inputobj = new ej.inputs.TextBox({
placeholder: 'Enter Value',
cssClass: 'e-error',
floatLabelType: 'Auto'
});
inputObj.appendTo
('#validation'); |