JavaScript (ES5)

How To

Set the rounded corner

Render the TextBox with rounded corner by adding the e-corner class to the input parent element.

Source

Preview

index.js

index.html

index.css

ej.base.enableRipple(true);

// To get the all input fields and its container.

var 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 (var i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener("focus", function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener("blur", function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}

// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

var inputIcon = document.querySelectorAll('.e-input-group-icon');
for (var 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);
    });
}

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <div id="input-container">



        <div class="e-input-group e-corner">
            <input class="e-input" type="text" placeholder="Enter Date" />
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>

        <div class="e-float-input e-input-group e-corner">
            <input type='text' required />
            <span class="e-float-line"> </span>
            <label class="e-float-text">Enter Date </label>
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>




          </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: 340px;
}

.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.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
  font-size:14px;
}

.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 .e-input-group { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

Set the disabled state

Disable the TextBox by adding the e-disabled to the input parent element and set disabled attribute to the input element.

Source

Preview

index.js

index.html

ej.base.enableRipple(true);

// To get the all input fields and its container.

var 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 (var i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener('focus', function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener('blur', function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <div id="input-container">



        <input class="e-input" type="text" placeholder="Enter Name" disabled/>

        <div class="e-float-input e-disabled">
            <input type='text' required  disabled/>
            <span class="e-float-line"></span>
            <label class="e-float-text">Enter Name</label>
        </div>




          </div>
        </div>
    </div>
</body>
</html>

Set the read-only TextBox

You can make the TextBox as read-only by setting the readonly attribute to the input element.

Source

Preview

index.js

index.html

ej.base.enableRipple(true);

// To get the all input fields and its container.

var 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 (var i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener('focus', function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener('blur', function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <div id="input-container">



        <input class="e-input" type="text" placeholder="Enter Name" value="John" readonly/>

        <div class="e-float-input">
            <input type='text' required readonly value="John"/>
            <span class="e-float-line"></span>
            <label class="e-float-text e-label-top">Enter Name</label>
        </div>




          </div>
        </div>
    </div>
</body>
</html>

Add TextBox programmatically

Create a TypeScript file and import the Input modules from ej2-inputs library as shown below.

import {Input} from '@syncfusion/ej2-inputs';

Pass the HTML Input element as parameter to the createInput method.
You can also add the icons on the input by passing buttons property value with the class name e-input-group-icon as parameter to the createInput method.

Source

Preview

index.js

index.html

index.css

ej.base.enableRipple(true);

// To get the all input fields and its container.

var 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 (var 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')
    });
}

// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

var inputIcon = document.querySelectorAll('.e-input-group-icon');
for (var 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);
    });
}

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <div id="input-container">
          </div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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 .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
  font-size:16px;
}

.e-input-group-icon:before {
  font-family: e-icons;
}

.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-popup-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.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 .e-input-group { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

Add floating label to TextBox programmatically

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 from ej2-inputs library as shown below.

import {Input} from '@syncfusion/ej2-inputs';

Pass the HTML Input element and floatLabelType property as Auto to the createInput method.
Set the placeholder value to the input element via element attribute or pass the parameter to the createInput 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 passing buttons property value with the class name e-input-group-icon as parameter to the createInput method.

Source

Preview

index.js

index.html

index.css

ej.base.enableRipple(true);

var inputObj;

var element = <HTMLInputElement>document.createElement('input');
document.getElementById('input-container').appendChild(element);
Input.createInput({
    element: element,
    floatLabelType: "Auto",
    properties:{
        placeholder: 'Enter Name'
    }
});

var element2 = document.createElement('input');
document.getElementById('input-container-01').appendChild(element2);
Input.createInput({
    element: element2,
    floatLabelType: "Always",
    properties:{
        placeholder:'Enter Name'
    }
});

var element3 = document.createElement('input');
document.getElementById('input-container-02').appendChild(element3);
Input.createInput({
    element: element3,
    floatLabelType: "Never",
    properties:{
        placeholder:'Enter Name'
    }
});

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <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>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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;
}

Change the floating label color of the TextBox

You can change the floating label color of the TextBox for both success and warning validation states by applying the following CSS styles.

    /* For Success state */
    .e-float-input.e-success label.e-float-text,
    .e-float-input.e-success input:focus ~ label.e-float-text,
    .e-float-input.e-success input:valid ~ label.e-float-text {
      color: #22b24b;
    }

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
   .e-float-input.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
    }

Source

Preview

index.js

index.html

index.css

ej.base.enableRipple(true);

// To get the all input fields and its container.

var 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 (var i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener("focus", function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener("blur", function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}

// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

var inputIcon = document.querySelectorAll('.e-input-group-icon');
for (var 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);
    });
}

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
                <div id="input-container">



       <div class="e-input-group e-float-input e-success">
        <input type="text" required>
        <span class="e-float-line"></span>
        <label class="e-float-text">Success</label>
       </div>
       <div class="e-input-group e-float-input e-warning">
         <input type="text" required>
         <span class="e-float-line"></span>
         <label class="e-float-text">Warning</label>
        </div>




            </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: 340px;
  }
  
  .e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #22b24b;
  }
  .e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #22b24b;
  }
  .e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
    color: #22b24b;
  }
  
  .e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #ffca1c;
  }
  .e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #ffca1c;
  }
  .e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
    color: #ffca1c;
  }

.content-wrapper {
    width: 90%;
    margin: 0 auto;
    min-width: 185px;
}

.content-wrapper .row {
    padding: 15px 0;
}

Change the color of the TextBox based on its value

You can change the color of the TextBox by validating its value using regular expression in the keyup event for predicting the numeric values as demonstrated in the following code sample.

Source

Preview

index.js

index.html

index.css

// To Configure RegExp for predicting Numeric values on keyUp event function

function onKeyup(e) {
    let str = e.value.match(/^[0-9]+$/);
    if (!((str && str.length > 0)) && e.value.length) {
       e.classList.add('e-error');
    } else {
      e.classList.remove('e-error');
    }
  }

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>



           <label>Normal Input</label>
                <div class="e-input-group">
                    <input class="e-input" type="text" placeholder="Enter numeric values" onkeyup="onKeyup(this)" />
                </div>
          <label> Floating Input </label>
                <div class="e-float-input">
                    <input type="text" onkeyup="onKeyup(this)" required />
                    <span class="e-float-line"> </span>
                    <label class="e-float-text">Enter numeric values</label>
                </div>




            <div id="input-container">
          </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: 340px;
}


#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

.e-input-group.e-error .e-input { /* csslint allow: adjoining-classes */
  color: #f44336;
}

.e-float-input.e-error input { /* csslint allow: adjoining-classes */
  color: #f44336;
}

.wrap label { /* csslint allow: adjoining-classes */
 font-weight:bold;
}

Add floating label to read-only textbox

You can achieve floating label for read-only textboxes by adding/removing e-label-top and e-label-bottom classes to the label element

In this sample, click the update value button to fill the read-only textbox with value and float a label.

Source

Preview

index.js

index.html

index.css

ej.base.enableRipple(true);

function checkFloatingLabel(id) {
    var inputElement = document.getElementById(id);
    var labelElement = inputElement.parentElement.querySelector('.e-float-text');
    if (inputElement.value !== '') {
        labelElement.classList.remove('e-label-bottom');
        labelElement.classList.add('e-label-top');
    }
    else {
        labelElement.classList.remove('e-label-top');
        labelElement.classList.add('e-label-bottom');
    }
}
var inputField = document.getElementById('myText');
document.getElementById('valuebtn').onclick = function () {
    document.getElementsByClassName('myField')[0].value = '10';
    checkFloatingLabel('myText');
};
document.getElementById('removebtn').addEventListener('click', function () {
    document.getElementsByClassName('myField')[0].value = '';
    checkFloatingLabel('myText');
});

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' class="text_value">
        <div id="input-container"></div>



        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <div class="e-float-input">
                    <input class="e-input myField" id="myText" name="readonlyAttr"  type="text" readOnly>
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Enter value</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
                <button class="e-btn update_value" id='valuebtn' >Set value</button>
                <button class="e-btn remove_value" id='removebtn' >Remove value</button>
            </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%;
  }
  
.update_value, .remove_value {
    margin-top: 20px;
}

.remove_value {
    margin-left: 10px;
}

.text_value {
    visibility: visible;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 10px;
    width: 260px;
}

Customize the textbox background-color and text-color

You can customize the textbox styles such as background-color, text-color and border-color by overriding its default styles.

To change the styles of the floating label, you must override the style to the input element.

Source

Preview

index.js

index.html

index.css

ej.base.enableRipple(true);

// To get the all input fields and its container.

var 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 (var i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener("focus", function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener("blur", function () {
        var parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>



        <label>Normal Input</label>
            <div class="e-input-group">
                <input class="e-input" type="text" placeholder="First Name" />
            </div>
        <label> Floating Input </label>
            <div class="e-float-input">
                <input type="text" required />
                <span class="e-float-line"> </span>
                <label class="e-float-text">Last Name</label>
            </div>




            <div id="input-container">
          </div>
        </div>
    </div>
</body>
</html>

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 260px;
}

.wrap label { /* csslint allow: adjoining-classes */
 font-weight:bold;
}

.wrap .e-float-input {/* csslint allow: adjoining-classes */
   margin:30px 0;
}

.wrap .e-input-group {/* csslint allow: adjoining-classes */
   margin:25px 0;
}


/* To change the background-color and text-color for textbox */ 
.e-input-group,
.e-float-input,
.e-float-input.e-input-group { /* csslint allow: adjoining-classes */
  background : lightgray;
  color: green;
}

/* To change the border-color of the textbox */ 
.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { /* csslint allow: adjoining-classes */
  border-color: #0800ff;
}

/* To change the border-color of the floating-label textbox */ 
.e-float-input input,
.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]) { /* csslint allow: adjoining-classes */
    border-color: #0800ff;
}

Contents

Set the rounded corner
Set the disabled state
Set the read-only TextBox
Add TextBox programmatically
Add floating label to TextBox programmatically
Change the floating label color of the TextBox
Change the color of the TextBox based on its value
Add floating label to read-only textbox
Customize the textbox background-color and text-color

Contents

Set the rounded corner
Set the disabled state
Set the read-only TextBox
Add TextBox programmatically
Add floating label to TextBox programmatically
Change the floating label color of the TextBox
Change the color of the TextBox based on its value
Add floating label to read-only textbox
Customize the textbox background-color and text-color

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!