Turn maxlength attribute into an accessible live character count
npm install input-lengthThis component creates a visual representation of the maxlength constraint
and updates it as the user interacts with that field, with customisation
to allow custom classes and styling.
!text
npm install input-length
``html`
`js
const $ = require('jquery');
import InputLength from './dist/InputLength';
$(function () {
const inputLength = new InputLength($('html'));
inputLength.init({
targetSelector: '.js-inputLengthWarning'
});
});
`
A new element will be inserted immediately after the target input, and new
attributes will be added. The aria-describedby guid will be added to
the existing aria-describedy value if one is already present.
`html`
4 characters allowed
This component bakes in the following features automatically:
* The message is linked to the input using aria-describedby so it is announced
when the field receives focus.
* The message uses a live region to communicate the number of remaining characters
when the user pauses or finishes typing.
There are a handful of classes and options that can be customised to suit your
implementation.
| Option | Type. | Default | Description |
| ------------- | ------- | -------------------- | ----------- |
| baseClass | string | inputLength | Class applied to the main message container, appended immediately after the target input |inputLength__label
| labelClass | string | | Class applied to the span element which wraps the integer count |inputLength--ok
| okClass | string | | Class applied when the input length is < warnThreshold |inputLength--warn
| warnClass | string | | Class applied when the input length is > warnThreshold and < maxlength |inputLength--stop
| stopClass | string | | Class applied when the input length equals maxlength |70
| warnThreshold | int | | Percentage of maxlength where the warnClass should be applied |
Pass options through the constructor, for example:
`js``
inputLength.init({
targetSelector: '.js-inputLengthWarning',
labelClass: 'label',
okClass: 'label--success',
warnClass: 'label--warning',
stopClass: 'label--danger',
warnThreshold: 90
});