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

Environment

Product	TextArea for Progress® Telerik® UI for ASP.NET Core
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>

    @addTagHelper *, Kendo.Mvc

    <div style="width: 400px;">
        <kendo-textarea name="textarea" 
            rows="10" 
            max-length="250" 
            placeholder="Enter your text here."
            data-required-msg="Please enter a text." 
            data-max-msg="Enter value between 1 and 250">
        </kendo-textarea>
        <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 a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the TextArea HtmlHelper
• Sample code with the TextArea TagHelper

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 Core TextArea Resources

• ASP.NET Core TextArea Documentation

• ASP.NET Core TextArea Demos

• ASP.NET Core TextArea Product Page

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

See Also

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