@diotoborg/neque-sit-molestias v3.13.89

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

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

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.

<label for="example">Example field</label>
<input type="text" id="example" class="js-inputLengthWarning" maxlength="4" aria-describedby="guid-xxxx" />
<span id="guid-xxxx" class="inputLength inputLength--ok">
  <span class="inputLength__label">4</span> characters allowed
</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.

Pass options through the constructor, for example:

inputLength.init({
  targetSelector: '.js-inputLengthWarning',
  labelClass: 'label',
  okClass: 'label--success',
  warnClass: 'label--warning',
  stopClass: 'label--danger',
  warnThreshold: 90
});