Character counter
Wrap around a textarea or input to add a character counter below it.
Live example
How to use
Install the package or use the CDN, then add the files to the head of your HTML file.
Wrap the <nidhugg-char-count>
tag around a textarea
or input
.
You can also add a maxlength attribute to the tag to set the maximum number of characters allowed.
<nidhugg-char-count maxlength="50">
Example
<nidhugg-char-count maxlength="50">
<textarea>Lorem ipsum dolor sit amet...</textarea>
</nidhugg-character-count>
Installation
The package can be found here: https://jsr.io/@nidhugg/web-components, and the code is hosted here: https://github.com/fredrikbergqvist/nidhu.gg
npm:
npx jsr add @nidhugg/web-components
Yarn:
yarn dlx jsr add @nidhugg/web-components
CDN:
- https://cdn.jsdelivr.net/gh/fredrikbergqvist/nidhu.gg/dist/backToTop/nidhuggCharacterCount.css
- https://cdn.jsdelivr.net/gh/fredrikbergqvist/nidhu.gg/dist/backToTop/nidhuggCharacterCount.js
Styling
The counter element has a class that can be targeted nidhugg-character-counter
.nidhugg-character-counter {
/** Custom styles **/
}