alpinejs-character-count
v1.0.3
Published
Track the character count of an input with the option to compare against the max length 🔟
Downloads
156
Maintainers
Readme
Alpine JS Character Count
Track the character count of an input with the option to compare against the max length 🔟
Example
<div x-data="{ message: 'Hello' }">
<textarea x-model="message" maxlength="50"></textarea>
<p>You have written <span x-count="message"></span> characters.</p>
<p>You have <span x-count.50="message"></span> characters remaining.</p>
</div>
This will return the following:
<p>You have written 5 characters.</p> <p>You have 45 characters remaining</p>
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
<div x-data="{ message: 'Hello' }">
<textarea x-model="message" maxlength="100" x-ref="textarea"></textarea>
<p>You have written <span x-count="message"></span> characters.</p>
<p>You have <span x-count.textarea="message"></span> characters remaining.</p>
</div>
Instead of passing the max character count as the modifier, you pass the name of
an Alpine JS x-ref
.
Install
CDN
<script
defer
src="https://unpkg.com/alpinejs-character-count@latest/dist/count.min.js"
></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
NPM/Yarn
npm i -D alpinejs-character-count
yarn add -D alpinejs-character-count
Then you can register the plugin.
import Alpine from 'alpinejs'
import count from 'alpinejs-character-count'
Alpine.plugin(count)
window.Alpine = Alpine
Alpine.start()
Stats