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 truncated if text is greater than the limit.

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