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




Or, with options.

  limit: 140,
  warning: 100,
  allowExceed: true,
  counterClass: "character-count",
  defaultClass: "bg-info",
  warningClass: "bg-warning",
  dangerClass: "bg-danger",
  submitButton: ""


  • 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


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