jQuery Textmeter

When a form textarea only accepts a certain amount of characters, it is often nice to display to the user this amount and to visually count down how many characters they have left and if they go over. This technique was made popular by Twitter to make working with their 140 character limit easier.

This plugin will attach to each textarea in a specified container and add a visual element under it that continually updates as the user interacts with the textarea. It has several options to make it applicable to almost any context.

Requirements

  • jQuery 1.6+

Features

  • Displays max count and number of characters left.
  • Configurable HTML container and CSS class.
  • Configurable message and message format.
  • Option to “pulse” (blink) when max count is exceeded.
  • Configurable delay between interaction and message update.
  • Specify a RegEx expression as a constant length.
  • The only textmeter that can account for shortened URLs.
  • Free and open source.
  • Quick Start

    Displays a running "characters left" count under a textarea.
    Step 1

    Attach it to any HTML textarea:

    <textarea rows="10" cols="10"></textarea>
    Step 2

    Basic usage specifing a max character count of 400. If not specified, defaults to 140.

    jQuery(document).ready(function(){
      $("textarea").textmeter(400);
    });
    
    Step 3

    There are several options to allow you to customize your jQuery Textmeter. These can be set using a second parameter, like so:

    jQuery(document).ready(function(){
      $("textarea").textmeter(250, 
      {
        pulse: false,
        className: "myTextmeter"
      });
    });
    
  • Options

    container
    String <span></span>

    The markup container to add the Textmeter to.

    $(".selector").textmeter(250, { container: "<div></div>" });
    className
    String textmeter

    The CSS class to assign to the Textmeter.

    $(".selector").textmeter(250, { className: "myClass" });
    format
    String <br/>Characters left: <strong>{n}</strong>

    The markup format of the Textmeter. The token {n} is replaced with the remaining character count.

    $(".selector").textmeter(250, { format: " <br />You have <em>{n}</em> characters left." });
    pulse
    Boolean true

    Whether to pulse, or flash, when the characters remaining count drops below zero.

    $(".selector").textmeter(250, { pulse: false });
    delay
    Number 0

    The number of milliseconds to delay before updating the Textmeter after its textarea is changed.

    $(".selector").textmeter(250, { delay: 100 });
    ignoreRegex
    String null

    A Regex expression that specifies text that should not be counted when considering the characters left. The corresponding option ignoreReplacementSize gives you the option to specify a constant to deduct from the characters left instead of the string length count. This is useful when using URL shorteners.

    $(".selector").textmeter(250, { ignoreRegex: /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g });
    ignoreReplacementSize
    Number 0

    Used in conjunction with the ignoreRegex option, this specifies a constant value for the character count that matches the Regex expression. This is useful when using URL shorteners.

    var urlRegex = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g;
    $(".selector").textmeter(250, { ignoreRegex: urlRegex, ignoreReplacementSize: 7 });
  • License

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    Copyright Planet Telex, Inc.