Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including short-and-sweet with all npm packages installed. Try it out:

var shortAndSweet = require("short-and-sweet")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

short-and-sweet v1.0.2

Accessible character counter for input elements

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 at: https://codepen.io/rikschennink/pen/LmoJYY

License: MIT npm version Donate with PayPal

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.

OptionDefaultDescription
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}
assistDelay2000The 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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free