Twitter-like Character Count Plugin Written in jQuery

T

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

About the author

Orlando

I'm a software developer by day, and writer by night. I also write code at night, and occasionally words by day. Really, the main takeaway is I enjoy typing on a keyboard a lot.

Add Comment

By Orlando

Orlando

I'm a software developer by day, and writer by night. I also write code at night, and occasionally words by day. Really, the main takeaway is I enjoy typing on a keyboard a lot.

Get in touch

You can find me on Github and Goodreads.

Fork me on GitHub

Recent Posts

Recent Comments

Archives

Categories