Class CharacterCount

Character count component

Tracks the number of characters or words in the .govuk-js-character-count <textarea> inside the element. Displays a message with the remaining number of characters/words available, or the number of characters/words in excess.

You can configure the message to only appear after a certain percentage of the available characters/words has been entered.

Preserve

Hierarchy

  • GOVUKFrontendComponent
    • CharacterCount

Constructors

constructor

Properties

$module $screenReaderCountMessage $textarea $visibleCountMessage config i18n lastInputTimestamp lastInputValue maxLength valueChecker defaults moduleName schema

Methods

bindChangeEvents count formatCountMessage getCountMessage handleBlur handleFocus handleKeyUp isOverThreshold updateCountMessage updateIfValueChanged updateScreenReaderCountMessage updateVisibleCountMessage

Constructors

constructor

Properties

Private$module

$module: HTMLElement

Private$screenReaderCountMessage

$screenReaderCountMessage: HTMLDivElement

Private$textarea

$textarea: HTMLInputElement | HTMLTextAreaElement

Private$visibleCountMessage

$visibleCountMessage: HTMLDivElement

Privateconfig

config: CharacterCountConfig

Privatei18n

i18n: I18n

PrivatelastInputTimestamp

lastInputTimestamp: number = null

PrivatelastInputValue

lastInputValue: string = ''

PrivatemaxLength

maxLength: number

PrivatevalueChecker

valueChecker: number = null

Staticdefaults

defaults: CharacterCountConfig = ...

Character count default config

See

CharacterCountConfig

Constant

StaticmoduleName

moduleName: string = 'govuk-character-count'

Name for the component used when initialising using data-module attributes.

Staticschema

schema: Readonly<{
    anyOf: {
        errorMessage: string;
        required: string[];
    }[];
    properties: {
        i18n: {
            type: "object";
        };
        maxlength: {
            type: "number";
        };
        maxwords: {
            type: "number";
        };
        threshold: {
            type: "number";
        };
    };
}> = ...

Character count config schema

Constant

Methods

PrivatebindChangeEvents

Privatecount

  • count(text): number
  • Private

    Count the number of characters (or words, if config.maxwords is set) in the given text

    Parameters

    • text: string

      The text to count the characters of

    Returns number

    the number of characters (or words) in the text

PrivateformatCountMessage

  • formatCountMessage(remainingNumber, countType): string
  • Private

    Formats the message shown to users according to what's counted and how many remain

    Parameters

    • remainingNumber: number

      The number of words/characaters remaining

    • countType: string

      "words" or "characters"

    Returns string

    Status message

PrivategetCountMessage

PrivatehandleBlur

PrivatehandleFocus

  • handleFocus(): void
  • Private

    Handle focus event

    Speech recognition software such as Dragon NaturallySpeaking will modify the fields by directly changing its value. These changes don't trigger events in JavaScript, so we need to poll to handle when and if they occur.

    Once the keyup event hasn't been detected for at least 1000 ms (1s), check if the textarea value has changed and update the count message if it has.

    This is so that the update triggered by the manual comparison doesn't conflict with debounced KeyboardEvent updates.

    Returns void

PrivatehandleKeyUp

PrivateisOverThreshold

  • isOverThreshold(): boolean
  • Private

    Check if count is over threshold

    Checks whether the value is over the configured threshold for the input. If there is no configured threshold, it is set to 0 and this function will always return true.

    Returns boolean

    true if the current count is over the config.threshold (or no threshold is set)

PrivateupdateCountMessage

PrivateupdateIfValueChanged

PrivateupdateScreenReaderCountMessage

PrivateupdateVisibleCountMessage

Settings

Member Visibility

On This Page

Constructors
Properties
Methods