Twitter-like Character Count Plugin Written in jQuery

See it in action right away if you don’t feel like reading.

I wanted to pop my plugin cherry, but I wasn’t sure what to put together. A wise man once said, “If you don’t know what to build, just build something you need for yourself.” That wise man’s name? Albert Einstein. Just kidding. It was me. I said that.

I’m currently working on a web app that requires limiting text fields to a certain number of characters, because lowering the quality of discourse to a level of syntactically-fucked brevity is all the rage these days. So rather than just implement it onto my app, I decided to turn it into a plugin. Because, you know, not enough jQuery plugins exist.

Grab the plugin on Github

Usage

Simple.

$("#textbox").lilCharacterCount();

Or, with options.

$("#textbox").lilCharacterCount({
  limit: 140,
  warning: 100,
  allowExceed: true,
  counterClass: "character-count",
  defaultClass: "bg-info",
  warningClass: "bg-warning",
  dangerClass: "bg-danger",
  submitButton: ""
});

Features

  • Count down from character limit to 0
  • Block further text past limit, or allow text past limit and display negative count (like Twitter)
  • Warn user when getting close to limit (again, like Twitter)
  • Disable submit button when exceeding limit
  • Uses Bootstrap classes by default, but can be changed via options

Options

limit
Number. Sets the character limit for the text box. Default: 140
warning
Number. Toggles the warning class on the counter when this character count is reached. When set to 0, it is disabled. Default: 100
allowExceed
Boolean. Determines whether or not typing is allowed past the limit. Default: true
submitButton
String. ID of submit button that, if supplied, will be disabled if limit is exceeded. Default: blank
counterClass
String. Class for the counter. Default: character-count
defaultClass
String. Class applied to counter when the character warning or limit values haven’t been exceeded. Default: bg-info
warningClass
String. Class applied to counter when the character warning values have been exceeded. Default: bg-warning
dangerClass
String. Class applied to counter when the character limit value has been exceeded. Default: bg-danger

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>