Limit number of characters allowed in form textarea /input field with counter

In this post I am going to share plugin which help you to set limit number of characters in form textarea /input field with adds a text counter message along with text field. It’ll not let the user type after characters limit. The plugin I am going to use is LimitText. It is lightweight and easy to integrate plugin. By default the plugin displays the number of characters the user can type in the field. As the user types, the number counts down to show them how many characters are left. Once they reach a threshold (ex. 10 characters remaining), the text will change color to warn them that they are getting close to the limit. The plugin handles both typing and pasting text.

Integrate LimitText In your Web Project

Libraries

This is a jQuery plugin, so first you need included jQuery core library after that Import the minified plugin code jquery.limitText.min.js, Also use bootstrap css for showing warning count (optional).


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
 

<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous">script>
<script src="jquery.limitText.min.js">script>

HTML

Suppore we have a textarea field and we have have to apply following markup:

  1. Directly under the TextArea element, add a new div with an id for reference. This is where your counter text will be displayed.
  2. Set the alignment for the counter text as per your wish. To do that just add a class or style to align the div to the right. If you’re using Bootstrap, use the class “text-right”. This is optional.
  3. In your TextArea element add a data attribute called “data-status-message”, to reference the div you added
>

="counter1" class="text-left">

>

Note: if you have multiple text areas, and want to add limitText to each of them, then each message div must have a unique Id value, and each data-status-message attribute must reference the specific values accordingly.

>

="counter1" class="text-left">

>
>   >

="counter2" class="text-left">

>

Top