Let your users know when that input field text is too long.
Requires jquery.

Type something below

8 Characters

Want more?

140 Characters


capbar.js | capbar.css

Or clone directly from github.

Dependencies :


1. Markup

Add capbar to your page

<link rel="stylesheet" href="capbar.css">
<script src="capbar.js"></script>

2. Javascript

Running this code will start capbar. Run this after the DOM is loaded, possibly after the ready event.

var capbar = new Capbar();

To unbind all event listners and cleanly stop capbar, use the stop() method


3. Linking input tags

Add data-target="capbar" and data-maxchars=(max characters) to your input field. See the code below.

<input type="text" data-target="capbar" data-maxchars="8">

4. Css

The default css should be adequate. However, you can customize the bar by modifying the .bar class


var capbar = new Capbar({
	element  : '.bar'    // Default : Checks if .bar class is present. If not then it will create and append an element in body.
	selector : '.capbar' // Default : uses data-target="capbar'.
	top      : true      // Default : false, set it to true to display capbar at the top of the screen.

Credits & license

Created by shash7. Licensed under MIT license

Patches welcome.

Fork me on GitHub