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.

Installation

npm install @diotoborg/neque-sit-molestias

Basic usage

1<label for="example">Example field</label>
2<input type="text" id="example" class="js-inputLengthWarning" maxlength="4" />

1const $ = require('jquery');
2
3import InputLength from './dist/InputLength';
4
5$(function () {
6    const inputLength = new InputLength($('html'));
7
8    inputLength.init({
9      targetSelector: '.js-inputLengthWarning'
10    });
11});

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.

1<label for="example">Example field</label>
2<input type="text" id="example" class="js-inputLengthWarning" maxlength="4" aria-describedby="guid-xxxx" />
3<span id="guid-xxxx" class="inputLength inputLength--ok">
4  <span class="inputLength__label">4</span> characters allowed
5</span>

Accessibility

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.

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:

1inputLength.init({
2  targetSelector: '.js-inputLengthWarning',
3  labelClass: 'label',
4  okClass: 'label--success',
5  warnClass: 'label--warning',
6  stopClass: 'label--danger',
7  warnThreshold: 90
8});