Skip to content

Visually represent the maxlength attribute of an input

License

Notifications You must be signed in to change notification settings

Stanton/input-length

Repository files navigation

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

<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.

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:

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

About

Visually represent the maxlength attribute of an input

Resources

License

Stars

Watchers

Forks

Packages

No packages published