https://github.com/markmead/alpinejs-character-count
Track the character count of an input with the option to compare against the max length 🔟
https://github.com/markmead/alpinejs-character-count
alpine-js alpinejs alpinejs-plugin javascript
Last synced: about 1 year ago
JSON representation
Track the character count of an input with the option to compare against the max length 🔟
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-character-count
- Owner: markmead
- License: mit
- Created: 2022-06-10T17:25:30.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:14:21.000Z (over 1 year ago)
- Last Synced: 2025-03-24T20:12:32.133Z (over 1 year ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, javascript
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/form-input-character-count
- Size: 21.5 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Character Count
Track the character count of an input with the option to compare against the max
length 🔟
## Example
```html
You have written characters.
You have characters remaining.
```
This will return the following:
```html
You have written 5 characters.
You have 45 characters remaining
```
The modifier in the example `50` is the max character count which you can pair
up with the `maxlength` attribute on the HTML input. If you want a more dynamic
approach to this, you can do the following.
### Using Alpine JS Refs
```html
You have written characters.
You have characters remaining.
```
Instead of passing the max character count as the modifier, you pass the name of
an Alpine JS `x-ref`.
## Install
### CDN
```html
```
### NPM/Yarn
```shell
npm i -D alpinejs-character-count
yarn add -D alpinejs-character-count
```
Then you can register the plugin.
```js
import Alpine from 'alpinejs'
import count from 'alpinejs-character-count'
Alpine.plugin(count)
window.Alpine = Alpine
Alpine.start()
```
### Stats
