jQuery word Counting & Limit Characters in Textarea

A simple jQuery word counting and characters limit plugin for textarea / text input field. The plugin show the character left (or entered chars) on the top of the input field.

You can easily integrate this lightweight plugin in your projects. The characters counting stats can be inserted top or bottom of input.

Plugin Overview

Plugin: Count Chars
Author: Wayne Boka
Licence: MIT Licence
Published: June 7, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7.05 KB

How to Make jQuery word Counting & Limit Characters

1. Load the jQuery and count chars‘s JavaScript file into your webpage.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Count Chars -->
<script type="text/javascript" src="/src/jquery.count-chars.js"></script>

2. After that, create HTML textarea or input element to count entered characters.

<h2> Textarea Chars Count</h2>
<textarea class="notes" maxlength="4000"></textarea>

<h2> Input Chars Count</h2>
<input type="text" class="notes" maxlength="50" />

Tip: Use the maxlength attribute to set the characters limit in input.

3. Initialize the plugin in jQuery document ready function.

$(document).ready(function() {

   $("textarea, input").countChars();

});

4. The basic CSS styles for textbox (input & textarea).

textarea {
	display: block;
	width: 100%;
}

h2, div {
	color: #FFFFFF;
}

.bucket {
	background: #0769AD;
	margin: 5px;
	padding: 10px;
}

4. Set the position for counting stats. Available option are: “before” or “after”.

$("textarea, input").countChars({
   position: "before",
});