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:
- 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>
@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:
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_msg
attribute to fit your needs.
More ASP.NET Core TextArea Resources
- ASP.NET Core TextArea Documentation
- Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET Core Forums