Adding Character Limit Hint to TextArea for {{ site.framework }}

Environment

Product	TextArea for Progress® Telerik® UI for ASP.NET MVC
Version	2023.1.425

Description

How can I add a character limit hint below the TextArea? The hint will show the remaining characters as I type in the TextArea.

Solution

Here's an example of how you can add a character counter to a TextArea using jQuery:

1. Include a <span> element below the TextArea in your markup.
2. Use jQuery to update the content of the <span> element with the remaining characters count as the user types.

<div style="width: 400px;">
    @(Html.Kendo().TextArea()
        .Name("textarea")
        .Placeholder("Enter your text here.")
        .Rows(10)
        .MaxLength(250)
        .HtmlAttributes(new { data_required_msg = "Please enter a text.", data_max_msg = "Enter value between 1 and 250" })
    )
    <span class="characters-counter">0/250 characters left.</span>
</div>

<script>
    $(document).ready(function() {
        $('#textarea').bind('keyup', function() {
            var valueLength = this.value.length;
            var count = 250 - valueLength;

            $(".characters-counter").html(count + "/250 characters left.")
        });
    })
</script>

<style>
    .characters-counter {
        float: right;
    }
</style>

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

Notes

• Make sure to adjust the MaxLength() option to match your desired character limit.
• Customize the message displayed in the <span> element and the data_max_msg attribute to fit your needs.

More ASP.NET MVC TextArea Resources

• ASP.NET MVC TextArea Documentation

• ASP.NET MVC TextArea Demos

• ASP.NET MVC TextArea Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the TextArea for ASP.NET MVC
• Server-Side API Reference of the TextArea for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base