Simple Character Counter For Text Fields - jQuery input-char-count.js

Simple Character Counter For Text Fields - jQuery input-char-count.js

input-char-count.js is a tiny jQuery character counter & character limit plugin for text fields (input field and textarea) that work with the native input maxlength attribute.

1. The plugin uses Bootstrap for the basic styling. Include the jquery-input-char-count-bootstrap3.min.css after Bootstrap's stylesheet:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="jquery-input-char-count-bootstrap3.min.css" rel="stylesheet">

2. Include jQuery library and the minified version of the input-char-count.js at the bottom of the web page.

<script src="" 
<script src="jquery-input-char-count.js"></script>

3. To create a basic character counter, just add the CSS class input-char-count to the target text fields and done.

<input type="text" class="form-control input-char-count">
<textarea class="form-control input-char-count"></textarea>

4. Limit the max number of characters allowed to be entered using the native maxlength attribute as these.

<input type="text" class="form-control input-char-count" maxlength="140">
<textarea class="form-control input-char-count" maxlength="200"></textarea>

5. To disable the max display:

<input type="text" 
       class="form-control input-char-count" 
<textarea class="form-control input-char-count" 

This awesome jQuery plugin is developed by patrickberger. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 06.01.2018
  • Source