short-and-sweet
v1.0.4
Published
Accessible character counter for input elements
Downloads
5,127
Maintainers
Readme
Short and Sweet, Accessible Character Counter
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
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