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: | January 19, 2024 |
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", });
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.