Add floating label to textbox programmatically in EJ2 TypeScript Textbox control
15 May 20239 minutes to read
The Floating Label TextBox
floats label above the TextBox after focusing, or entering a value in the TextBox.
Floating label supports the types of actions as given below.
Type | Description |
---|---|
Auto | The floating label will float above the input after focusing, or entering a value in the input. |
Always | The floating label will always float above the input. |
Never | By default, never float the label in the input when the placeholder is available. |
- Create a TypeScript file and import the
Input
modules fromej2-inputs
library as shown below.
import {Input} from '@syncfusion/ej2-inputs';
-
Pass the
HTML Input
element andfloatLabelType
property asAuto
to thecreateInput
method. -
Set the
placeholder
value to the input element viaelement attribute
or pass the parameter to thecreateInput
method.
The watermark label
will be updated based on the specified placeholder
value of the Floating Label TextBox
.
- You can add the
icons
on the input by passingbuttons
property value with the
class namee-input-group-icon
as parameter to thecreateInput
method.
// To get the all input fields and its container.
let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');
// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.
for (let i = 0; i < inputElement.length; i++) {
inputElement[i].addEventListener("focus", function () {
this.parentNode.classList.add('e-input-focus')
});
inputElement[i].addEventListener("blur", function () {
this.parentNode.classList.remove('e-input-focus')
});
}
// To get the all icon elements on the input field.
var inputIcon = document.querySelectorAll('.e-input-group-icon');
// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.
for (let i = 0; i < inputIcon.length; i++) {
inputIcon[i].addEventListener('mousedown', function () {
this.classList.add('e-input-btn-ripple');
});
inputIcon[i].addEventListener('mouseup', function () {
var element = this;
setTimeout(function () {
element.classList.remove('e-input-btn-ripple');
}, 500);
});
}
import { Input, InputObject } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
let inputObj: InputObject;
let element: HTMLInputElement = <HTMLInputElement>document.createElement('input');
document.getElementById('input-container').appendChild(element);
Input.createInput({
element: element,
floatLabelType: "Auto",
properties:{
placeholder:'Enter Name'
}
});
let element2: HTMLInputElement = <HTMLInputElement>document.createElement('input');
document.getElementById('input-container-01').appendChild(element2);
Input.createInput({
element: element2,
floatLabelType: "Always",
properties:{
placeholder:'Enter Name'
}
});
let element3: HTMLInputElement = <HTMLInputElement>document.createElement('input');
document.getElementById('input-container-02').appendChild(element3);
Input.createInput({
element: element3,
floatLabelType: "Never",
properties:{
placeholder:'Enter Name'
}
});
// Render float label TextBox with icon
let element4: HTMLInputElement = <HTMLInputElement>document.createElement('input');
document.getElementById('input-container-03').appendChild(element4);
Input.createInput({
element: element4,
floatLabelType: "Auto",
buttons: ['e-input-group-icon e-input-down'],
properties:{
placeholder:'Enter Value'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 TextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 TextBox Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<div id="input-container">
<h4> FloatLabelType as Auto </h4>
</div>
<div id="input-container-01">
<h4> FloatLabelType as Always </h4>
</div>
<div id="input-container-02">
<h4> FloatLabelType as Never </h4>
</div>
<div id="input-container-03">
<h4> Float label input with icons </h4>
</div>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 10px;
width: 260px;
}
.e-input-group-icon:before {
font-family: e-icons;
}
.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
font-size:16px;
}
.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
content: "";
}
.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
content: '\e85e';
}
.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
content: "";
}
.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */
content: '\e7ba';
}
.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */
content: '\e814';
}
.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
content: "";
}
.e-input-group-icon.e-input-left:before { /* csslint allow: adjoining-classes */
content: '\e904';
}
.e-input-group-icon.e-input-right:before { /* csslint allow: adjoining-classes */
content: '\e913';
}
.e-input-group-icon.e-input-reload:before { /* csslint allow: adjoining-classes */
content: '\e837';
}
.e-input-group-icon.e-input-search:before { /* csslint allow: adjoining-classes */
content: '\e806';
}
#input-container-03 .e-input-group { /* csslint allow: adjoining-classes */
margin: 30px 0;
}
#input-container-03 .e-float-input { /* csslint allow: adjoining-classes */
margin: 30px 0;
}