Floating Label in EJ2 JavaScript TextArea Control

25 Mar 202410 minutes to read

The floating label functionality in the TextArea control allows the placeholder text to float above the TextArea while the user interacts with it, providing a more intuitive user experience. This feature can be achieved using the floatLabelType API, which offers various options for defining the floating behavior:

Type Description
Auto The label floats above the TextArea when it receives focus or input, returning to its initial position when the TextArea loses focus and contains no value.
Always The label always remains floating above the TextArea, regardless of user interaction.
Never The label never floats; it remains in its default position within the TextArea. 
// Initialize the TextArea control.
var textareaObj = new ej.inputs.TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto'
});
// Render initialized TextArea.
textareaObj.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 TextArea</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 TextArea Components">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">


  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <div class='wrap'>
      <div id="input-container">
        <textarea id="default"></textarea>
      </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: 30px 10px;
    width: 260px;
}

Placeholder with localization

Localization library allows to localize the placeholder text of the TextArea to different cultures using the locale property.

// Initialize the TextArea control.
var textareaObj = new ej.inputs.TextArea({
    placeholder: 'veuillez inscrire vos commentaires',
    locale: 'fr-BE',
    floatLabelType: 'Auto'
});
// Render initialized TextArea.
textareaObj.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 TextArea</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 TextArea Components">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">


  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <div class='wrap'>
      <div id="input-container">
        <textarea id="default"></textarea>
      </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: 30px 10px;
    width: 260px;
}

To load translation object in an application use load function of L10n class.
In the below sample, German culture is loaded to the TextArea placeholder text.

// Initialize the TextArea control.
var textareaObj = new ej.inputs.TextArea({
    locale: 'de-DE',
    floatLabelType: 'Auto'
});

// Load culture for textarea
ej.base.L10n.load({
    'de-DE': {
        'textarea': {
            "placeholder": "Geben Sie Ihre Kommentare ein"
        }
    }
});

// Render initialized TextArea.
textareaObj.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 TextArea</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 TextArea Components">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">


  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <div class='wrap'>
      <div id="input-container">
        <textarea id="default"></textarea>
      </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: 30px 10px;
    width: 260px;
}