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

Private config

config: CharacterCountConfig

Private i18n

i18n: I18n

Private lastInputTimestamp

lastInputTimestamp: number = null

Private lastInputValue

lastInputValue: string = ''

Private maxLength

maxLength: number

Private valueChecker

valueChecker: number = null

Static defaults

defaults: CharacterCountConfig = ...

Character count default config

See

CharacterCountConfig

Constant

Static moduleName

moduleName: string = 'govuk-character-count'

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

Static schema

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

Character count config schema

Type declaration

  • anyOf: {
        errorMessage: string;
        required: string[];
    }[]
  • properties: {
        i18n: {
            type: "object";
        };
        maxlength: {
            type: "number";
        };
        maxwords: {
            type: "number";
        };
        threshold: {
            type: "number";
        };
    }
    • i18n: {
          type: "object";
      }
      • type: "object"
    • maxlength: {
          type: "number";
      }
      • type: "number"
    • maxwords: {
          type: "number";
      }
      • type: "number"
    • threshold: {
          type: "number";
      }
      • type: "number"

Constant

Methods

Private bindChangeEvents

Private count

  • 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

Private formatCountMessage

  • 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

Private getCountMessage

Private handleBlur

Private handleFocus

  • 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

Private handleKeyUp

Private isOverThreshold

  • 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)

Private updateCountMessage

Private updateIfValueChanged

Private updateScreenReaderCountMessage

Private updateVisibleCountMessage

Settings

Member Visibility

Theme

On This Page

constructor$module$screenReaderCountMessage$textarea$visibleCountMessageconfigi18nlastInputTimestamplastInputValuemaxLengthvalueCheckerdefaultsmoduleNameschemabindChangeEventscountformatCountMessagegetCountMessagehandleBlurhandleFocushandleKeyUpisOverThresholdupdateCountMessageupdateIfValueChangedupdateScreenReaderCountMessageupdateVisibleCountMessage