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:
- Include a
<span>element below the TextArea in your markup. - 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 thedata_max_msgattribute to fit your needs.
More ASP.NET MVC TextArea Resources
- ASP.NET MVC TextArea Documentation
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums