short-and-sweet - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #go #android #machine-learning #macos #windows #cli #security #openai #open-source

short-and-sweet

(★ 275)

📟 Accessible character counter for input elements

File Explorer

Download Latest Version (.zip)

- FUNDING.yml
- short-and-sweet.min.js
- short-and-sweet.module.js
- short-and-sweet.js
.browserslistrc
.gitattributes
.gitignore
.npmignore
.prettierignore
.prettierrc
header.svg
index.html
LICENSE
package-lock.json
package.json
README.md
rollup.config.js

# Installation Guide

1. Get the code

git clone https://github.com/rikschennink/short-and-sweet

Downloads the entire project code from GitHub to your computer.

cd short-and-sweet

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install short-and-sweet --save

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Short and Sweet, Accessible Character Counter

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rikschennink/short-and-sweet/blob/gh-pages/LICENSE)
[![npm version](https://badge.fury.io/js/short-and-sweet.svg)](https://badge.fury.io/js/short-and-sweet)

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)

---

[<img src="https://github.com/rikschennink/short-and-sweet/blob/master/header.svg" alt=""/>](https://www.buymeacoffee.com/rikschennink/)

[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Dev updates on Twitter](https://twitter.com/rikschennink/)

---

## 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.

```html
<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](http://semver.org).

## License

MIT