Warning, javascript is not enabled in your browser. Please enable javascript or else the examples will not work.

Description

Stop Verbosity is a jQuery plugin that limits the amount of text that is permitted in a textarea element by replicating the maxlength attribute for the textarea. A line of text, the indicator/counter, counts characters used or remaining when text is entered into the textarea. Once the limit is reached, there is no more text input from typing, pasting or drag and drop.

Default Options

$(‘textarea‘).stopVerbosity({
  limit: 10,
  limitFromTextArea: false,
  indicatorPosition: after,
  indicatorId: ,
  indicatorElementType: p,
  indicatorPhrase: [Used, [countup], of,
    [limit], characters., [countdown],
    characters remaining., The maximum is,
    [limit], characters., <br>,
    Permits multiple counts up:, [countup],
    and counts down:, [countdown].,
    This indicator is customizable.
  ],
  indicatorUpdateSpeed: 0,
  existingIndicator: ,
  generateIndicator: true,
  showIndicator: true,
  useNativeMaxlength: true,
  textLengthChange: false,
  useMaxlength: true,
  beforeAttachment: null,
  afterAttachment: null,
  existingText: clear
});

limit (integer)

The number of characters that are allowed in the textarea.

limitFromTextArea (boolean)

By default false, which only takes the limit from the plugin. If true, then the limit is taken from the textarea’s maxlength.

indicatorPosition (string)

Could be ‘before’ or ‘after’. ‘before’ inserts the indicator before the textarea. ‘after’ inserts the indicator after the textarea.

indicatorId (string)

Optional id if you wish to quickly refer to the indicator for styling.

indicatorElementType (string)

Should be either a ‘p’ or ‘span’ tag since the indicator is text.

indicatorPhrase (array of strings)

Specify your custom text with quotes for an item in the array. ‘[countup]’, ‘[countdown]’, and ‘[limit]’ are the only reserved variable strings. This means these string variable will change on textarea input.

indicatorUpdateSpeed (number)

The delay placed on the indicator before update. This is a number that is represented in milliseconds.

existingIndicator (object)

Supply an indicator element that is already on the page. Has to be a jQuery object ex. $(‘#my-textarea-indicator’)

generateIndicator (boolean)

By default, the indicator will be set to true for auto generation.

showIndicator (boolean)

The indicator will be shown, unless this is set to false.

useNativeMaxlength (boolean)

Uses the browser’s maxlength if supported when set to true. However, setting this to false will use the plugin’s implementation of maxlength. Should only set to false for testing purposes.

textLengthChange (boolean)

Triggers an event when set to true. Allows for a callback when there is a change in the text length of the textarea. This is useful for doing something that this plugin does not provide.

useMaxlength (boolean)

When set to false, maxlength is not implemented on the textarea. If the indicator is still present, the plugin will act as character counter. Set ‘useMaxlength’ to false to allow for overflow.

beforeAttachment (function)

Accepts and runs the function that is provided before the plugin initializes (attaching events).

afterAttachment (function)

Similar to beforeAttachment but runs the function after plugin initializes.

existingText (string)

Could be ‘clear’ or ‘truncate’. Determines how existing text is treated during initialization. The ‘clear’ option will clear out any existing text during initialization, while the ‘truncate’ option will truncate any excess characters to the right based on the limit.

Examples

Default Configuration

//The default has countdown and countup counters inside the indicator
//Has the same settings as the default options
$(‘#default‘).stopVerbosity({});

Customize Phrase

//Customize the indicator phrase
$(‘#customize-the-phrase‘).stopVerbosity({
  indicatorPhrase: [This is a custom indicator phrase.,
    This one only counts down. Only, [countdown], characters,
    left.
  ]
});

Plugin’s Maxlength

//Switch to using the plugin’s maxlength implementation
//The plugin will automatically use this mode if maxlength is not supported
//Should only set this to false for testing purposes
$(‘#use-plugin-maxlength‘).stopVerbosity({
  useNativeMaxlength: false,
  limit: 6,
  indicatorPhrase: [This textarea is using the plugin’s implementation of maxlength.,
    <br> The plugin will automatically use this mode,
    if maxlength is not supported. <br> Should only set this to false ,
    for testing purposes. Only, [countdown], characters, left.
  ]
});

Character Limit

//Change how many characters may be enter into the textarea
$(‘#adjust-limit-value‘).stopVerbosity({
  limit: 5,
  indicatorPhrase: [The amount of characters is now limited to 5. Only,
    [countdown], characters, left.
  ]
});

Limit from Textarea

//The limit from the textarea element overrides the limit supplied by the plugin.

$(‘#limit-from-textarea‘).stopVerbosity({
  indicatorPhrase: [Using maxlength from textarea. The limit is,
    [limit],characters.
  ],
   limit: 20
});

Indicator Position

//Change the position of indicator to appear before the textarea
$(‘#indicator-before-textarea‘).stopVerbosity({
  limit: 6,
  indicatorPosition: before,
  indicatorPhrase: [Indicator now goes before the texarea.,
    Only, [countdown], characters, left.
  ]
});

Custom Indicator Id

//The indicator can have a custom id
$(‘#custom-id-for-indicator‘).stopVerbosity({
  limit: 7,
  indicatorId: this-is-a-custom-id-for-the-indicator,
  indicatorPhrase: [Choose a custom id for your indicator. <br>,
    The id of the indicator is  “custom-id-for-indicator”. <br> Only,
    [countdown], characters, left.
  ]
});

Indicator Element Type

//Modify the element type of the indicator
$(‘#change-indicator-element-type‘).stopVerbosity({
  limit: 8,
  indicatorId: span-element,
  indicatorElementType: span,
  indicatorPhrase: [The element type of the indicator is now,
    a “span”. <br> Used, [countup], characters of, [limit],
    characters limit.
  ]
});

Update Speed

//The update speed of the indicator could be changed
$(‘#change-update-speed‘).stopVerbosity({
  limit: 9,
  indicatorUpdateSpeed: 90,
  indicatorPhrase: [Make your indicator update slower by specifying,
    a number in milliseconds. <br> This one has a delay of 90 milliseconds.,
    [countup], characters of, [limit], characters limit.
  ]
});

Existing Indicator

//Use an element on the page for the indicator
$(‘#existing-indicator‘).stopVerbosity({
  limit: 10,
  existingIndicator: $(‘#an-existing-indicator‘),
  indicatorPhrase: [If you already have an indicator element on the page,,
    use it instead.<br>, [countup], characters of, [limit], characters limit.
  ]
});

No Indicator

This is not an indicator. This is to show that the indicator can be disabled.
The limit is 5 characters.

//Choose not to show the indicator at all 
//as to use only the maxlength attribute on the textarea      
$(‘#no-indicator‘).stopVerbosity({
  limit: 5,
  showIndicator: false
});

Change Event

//Triggers a text length change event
//Made sure to set textLengthChange to true
$(‘#text-length-change‘).stopVerbosity({
  textLengthChange: true,
  indicatorPhrase: [When the text length changes, the “sv-textLengthChange”,
    event will occur.<br>, Have now used, [countup], characters of, [limit].
  ]
}).on(sv-textLengthChange, function (evt, infoObj) {
  console.log(There is a text length change for the textarea.);
  console.log(Textarea information:, infoObj);
  //Or do something else here that is
  //based on the length of currentTextLength
  //Could be useful for attaching classes onto 
  //the textarea or indicator for styling
});

No Maxlength

//No maxlength
//Could be a time to use in conjunction with
//the sv-textLengthChange event
$(‘#no-maxlength‘).stopVerbosity({
  limit: 1,
  useMaxlength: false,
  indicatorPhrase: [Disable maxlength for no constrain on the amount of text,
    input. <br> Use this option to allow for overflow or to only use the indicator. ,
    <br> Used, [countup], characters so far. Counting down characters:,
    [countdown]., The limit is, [limit], character.
  ],
  textLengthChange: true
}).on(sv-textLengthChange, function (evt, infoObj) {
  console.log(There is a text length change for the textarea.);
  console.log(Textarea information:, infoObj);
  //If infoObj.exceededLimit is true, (limit has been exceeded) can now do something about it
});

Before Attachment

//Before attaching plugin, do something with callback
$(‘#before-attachment‘).stopVerbosity({
  indicatorPhrase: [Stuff to run before the plugin attaches itself.,
    [countdown], characters used, of, [limit].
  ],
  beforeAttachment: function () {
    console.log(Before attaching, do something.);
  }
});

After Attachment

//After attaching plugin, do something with callback
//Reference the infoObj after finishing attachment
$(‘#after-attachment‘).stopVerbosity({
  afterAttachment: function (infoObj) {
    console.log(Info object is , infoObj);
    console.log(Finished attaching, do something.);
  }
});

Text Truncation

//Existing text in textarea is trucated if text is greater than the limit.

$(‘#text-truncation‘).stopVerbosity({
  indicatorPhrase: [Orignal words in textarea was “a lot of words”.,
    The limit is, [limit], of, characters.
  ],
   limit: 10,
   existingText:truncate
});

Notes

Tested on Opera > = 12.10, Ie > = 6 but 7, Firefox 22, Chrome 28 with jQuery 1.10.2. Attention has been made to the plugin to implement a maxlength that replicates the default maxlength behavior in a textarea. Text overflow is only allowed when setting the plugin’s ‘useMaxlength’ to false. The plugin by default, constrains text and peforms text truncation. Simple substring operations are not done. The maxlength follows the maxlength that are in present in recent versions of Firefox, Ie, and Chrome. This plugin will use the browser’s native maxlength and will fallback to the plugin’s implementation when lacking maxlength support or with only partial maxlength support. Since Ie9 has faulty support for maxlength, this plugin will monitor the textarea for exceeding the limit and impose the plugins’s maxlength. However, this will also override Opera 12 maxlength implementation. To normalize behaviors of browsers, the textarea is cleared upon page refresh and tab key press is prevented when text is highlighted with the mouse. This plugin is mainly a theoretical exercise because most of the newer major browsers do have full support for maxlength (IE > = 10, Firefox > = 4, Opera > = 11, Chrome > = 6). Older browsers version that do not support maxlength in textarea, tend not to be supported by Jquery. The existence of this plugin is then intended to be of use with Ie 6-9. Information of form support from here . Since browsers do not have an undo or redo event in textareas, this plugin will not support undos or redos in the textarea when using the plugin’s implementation of maxlength.