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

by Posted on

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).

<!--CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
 
<!--JS-->
<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
<textarea class="form-control" id="textarea1" data-status-message="#counter1" rows="3" cols="100"></textarea>
<div id="counter1" class="text-left"></div>

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.

<textarea class="form-control" id="textarea1" data-status-message="#counter1" rows="3" cols="100"></textarea>
<div id="counter1" class="text-left"></div>
<br/>
 
<textarea class="form-control" id="textarea2" data-status-message="#counter2" rows="5" cols="100"></textarea>
<div id="counter2" class="text-left"></div>



JS

Finally, at the bottom of your page initialize the plugin. Loading the plugin per textarea allows you to pass in custom options for each field. default 200 characters limit allowed but you can also pass custom limit see below.

$(function () {
     $('#textarea1').limitText();
     $('#textarea2').limitText({limit:500,warningLimit:50});
 });

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin