Input Length

This 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

Installation

npm install input-length

Basic usage

``html Example field`

`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. Thearia-describedbyguid will be added to the existing aria-describedy value if one is already present.

`html Example field 4 characters allowed`

`Accessibility`

This component bakes in the following features automatically:

* The message is linked to the input using aria-describedbyso 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.

`Additional options`

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 | | labelClass | string |inputLength__label | Class applied to the spanelement which wraps the integer count | | okClass | string |inputLength--ok | Class applied when the input length is < warnThreshold| | warnClass | string |inputLength--warn | Class applied when the input length is > warnThreshold and < maxlength| | stopClass | string |inputLength--stop | Class applied when the input length equals maxlength| | warnThreshold | int |70 | 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 });``

Basic usage

html
Example field

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
Example field


  4 characters allowed

Additional options

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 |
| labelClass    | string  |

inputLength__label | Class applied to the span

 element which wraps the integer count |
| okClass       | string  |

inputLength--ok | Class applied when the input length is < warnThreshold

 |
| warnClass     | string  |

inputLength--warn | Class applied when the input length is > warnThreshold and < maxlength

 |
| stopClass     | string  |

inputLength--stop | Class applied when the input length equals maxlength

 |
| warnThreshold | int     |

70 | 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
});