Home / CSS / Limit number of characters in input field

Limit number of characters in input field

Hello, In this tutorial, You’ll learn how you can limit numbers of characters in input field.

HTML Markup:

In this tutorial for demonstration, I have created a textarea. Maxlength attribute is used to limit the number of characters in input field, But we want to show remaining numbers of characters to our visitor.

Javascript/jQuery:

To increase the length of textbox length change the value of textbox_length. We have a set an event “onkeyup” whenever a button is pressed and release then this function will be called. curr_length variable is holding the current length of input field, Then we are checking using a if condition whether the entered number of characters are greater than or equal to the total length, So we will update the remaining length span color. otherwise it will remain black.

View Demo Download Now

Share This:

About Hasnain

Check Also

untitled

Create a clock using jQuery

In this tutorial, you will learn how to create a clock using jQuery. This clock …