To use the plugin, apply it to an existing <textarea>
or <input type="text">
element. The default length is 160 characters. ARIA live notifications for screenreaders begin at "polite" when there are 50 characters remaining, and escalate to "assertive" with 20 characters remaining.
<label for="basic-demo">Basic demo</label><br> <textarea id="basic-demo" rows="5" cols="45"></textarea>
$( function(){ $( "#basic-demo" ).accessibleCharCount() })
If the element already has a maxlength, the plugin won't override it.
<label for="input-field-demo">Input field demo</label><br> <input id="input-field-demo" maxlength="100">
$( function(){ $( "#input-field-demo" ).accessibleCharCount() })
In this demo, we demonstrate how you can override the default properties. (The buttons below change the "lang" attribute of the document for demonstration purposes.)
Set page language:
<label for="properties-demo">Properties demo</label><br> <textarea id="properties-demo" rows="5" cols="45"></textarea>
$( function(){ $( "#properties-demo" ).accessibleCharCount({ maxLength: 30, triggerPolite: 10, triggerAssertive: 5, everyNth: 0, beforeNumberElem: { html: { 'en': 'You have ' , 'ru': 'Осталось ' } }, afterNumberElem: { html: { 'ru': [ ' символов' , ' символ' , ' символа' , ' символа' , ' символа' , ' символов' ] } } }) })
<label for="custom-callback-demo">Custom callback demo</label><br> <textarea id="custom-callback-demo rows="5" cols="45""></textarea>
$( "#custom-callback-demo" ).accessibleCharCount({ afterUpdate: function( remaining ) { $(this).css( "background-color", "rgb(255,255," + ( remaining + 100 ) + ")" ) }, atMaxLength: function() { alert( "The element with ID " + this.id + " has reached its maximum length. Further input will be discarded." ) } })
$.fn.accessibleCharCount.defaults = { maxLength: 160 // The maximum length of the element // Will be overridden by actual maxlength if present , triggerPolite: 50 // The number of remaining characters that triggers the polite announcement , triggerAssertive: 20 // The number of remaining characters that triggers the assertive announcement , everyNth: 5 // How frequently to speak the whole message, as opposed to just the number // Set to 0 to turn off this feature , wrapperElem: { idPrefix: 'accessibleCharCount-wrapper-' // Prefix to apply to the ID , attrs: { 'class': 'accessibleCharCount-wrapperElem' } , css: {} // Inline CSS } , beforeNumberElem: { attrs: { 'class': 'accessibleCharCount-beforeNumberElem' } , css: {} , html: {} // Contents, by language and number // Defaults are provided in code } , numberElem: { idPrefix: 'accessibleCharCount-number-' // Prefix to apply to the ID , attrs: { 'class': 'accessibleCharCount-numberElem' } , css: {} } , afterNumberElem: { attrs: { 'class': 'accessibleCharCount-afterNumberElem' } , css: {} , html: {} } , onStateChange: function () {} // Callback function when state changes e.g. from 'off' to 'polite' , atMaxLength: function () {} // Callback function when the maximum length is reached }
If you add the "maxlength" attribute, then standards-compliant browsers will discard any characters you attempt to enter beyond that point, but this doesn't help people using screenreaders or text-to-speech (TTS) software. Try it here:
<label for="no-char-counter">No character counter</label><br> <textarea id="no-char-counter" rows="5" cols="45" maxlength="160"></textarea>
One solution is to add some Javascript to show a character counter. However, this can lead to quite chatty results. Try this out, and make sure your TTS/screenreader is on.
<label for="simple-char-counter">Simple character counter</label><br> <textarea id="simple-char-counter" rows="5" cols="45" maxlength="160"></textarea> <div id="chars-remaining" role="status"> <span id="count">160</span> characters remaining </div>
var $messageArea = document.getElementById('simple-char-counter'); var $count = document.getElementById('count'); $messageArea.onkeyup = function () { var messageText = $messageArea.value; var messageLength = messageText.length; var remaining = 160 - messageLength; $count.innerHTML = remaining; }