Floating Label in ASP.NET MVC TextArea Control

22 Mar 20243 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.

CSHTML

<div class="control-section">
    <div class="control_wrapper textarea-control-section">
        @Html.EJS().TextArea("default").Placeholder("Enter your comments").FloatLabelType(FloatLabelType.Auto).Render()
    </div>
</div>

Clear.cs

public ActionResult Label()
{
    return View();
}

Output be like the below.

Placeholder with localization

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

CSHTML

<div class="control-section">
    <div class="control_wrapper textarea-control-section">
        @Html.EJS().TextArea("default").Placeholder("veuillez inscrire vos commentaires").Locale("fr-BE").FloatLabelType(FloatLabelType.Auto).Render()
    </div>
</div>

Clear.cs

public ActionResult Localization1()
{
    return View();
}

Output be like the below.

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.

CSHTML

<div class="control-section">
    <div class="control_wrapper textarea-control-section">
        @Html.EJS().TextArea("default").Locale("de-DE").FloatLabelType(FloatLabelType.Auto).Render()
    </div>
</div>

<script>
    var L10n = ej.base.L10n;
    L10n.load({
        'de-DE': {
            'textarea': {
                placeholder: 'Geben Sie Ihre Kommentare ein'
            }
        }
    });
    loadCultureFiles('de-DE');
</script>

Clear.cs

public ActionResult Localization2()
{
    return View();
}