Skip to content
📟 Accessible character counter for input elements
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add options to docs May 25, 2018
src
.babelrc
.gitattributes
.gitignore
.npmignore
LICENSE
README.md
gulpfile.babel.js
package.json

README.md

Short and Sweet, Accessible Character Counter

License: MIT npm version Donate with PayPal

Tested with VoiceOver (Safari 11) & NVDA (FF 60)

  • Tells user the amount of space left when the field is focussed
  • Updates the user periodically while typing

Play around with the demo

https://codepen.io/rikschennink/pen/LmoJYY

View a video of Short and Sweet with VoiceOver

http://www.youtube.com/watch?v=3NDCEvHHaCY (sound is off)

Features

  • No dependencies
  • Easy setup
  • Accessible

Time to learn ES6?

Short and Sweet is written in ES6.

If you want to learn how to write modern ES6 JavaScript as well, I highly recommend ES6 for Everyone by Wes Bos.

Installation

Install from npm:

npm install short-and-sweet --save

Or download dist/short-and-sweet.min.js and include the script on your page like shown below.

Usage

Run short-and-sweet like shown below and pass an element reference or a querySelector. For best performance include the script just before the closing </body> element.

<textarea maxlength="200"></textarea>

<script src="short-and-sweet.min.js"></script>
<script>
shortAndSweet('textarea', {
  counterClassName: 'my-short-and-sweet-counter'
});
</script>

The following options are available to pass to the shortAndSweet method.

Option Default Description
counterClassName 'short-and-sweet-counter' The classname of the counter element
counterLabel '{remaining} characters left' The text shown in the counter element, placeholders available are {remaining}, {maxlength}, {length}
assistDelay 2000 The time in milliseconds the assist waits before updating the user with the screenreader user with the current count
append (el, counter) => { el.parentNode.appendChild(counter); } The method used to append the element to the DOM

Tested

  • Modern browsers
  • VoiceOver + Safari
  • NVDA + Firefox
  • IE 10+

Versioning

Versioning follows Semver.

License

MIT

You can’t perform that action at this time.