HTML element to use for character count
Optionalconfig: CharacterCountConfig = {}Character count config
Protected_$rootPrivate$screenPrivate$textareaPrivate$visiblePrivatei18nPrivatelastPrivatelastPrivatemaxPrivatevalueStatic ConstantdefaultsCharacter count default config
StaticelementStaticmoduleName for the component used when initialising using data-module attributes.
Static ConstantschemaCharacter count config schema
Protected$rootProtectedReturns the root element of the component
ProtectedconfigProtectedReturns the root element of the component
InternalCharacter count config override
To ensure data-attributes take complete precedence, even if they change
the type of count, we need to reset the maxlength and maxwords from
the JavaScript config.
configuration specified by dataset
PrivatebindPrivateBind change events
Set up event listeners on the $textarea so that the count messages update when the user types.
PrivatecountPrivateCount the number of characters (or words, if config.maxwords is set)
in the given text
The text to count the characters of
the number of characters (or words) in the text
PrivateformatPrivateFormats the message shown to users according to what's counted and how many remain
The number of words/characaters remaining
"words" or "characters"
Status message
PrivategetPrivateGet count message
Status message
PrivatehandlePrivateHandle blur event
Stop checking the textarea value once the textarea no longer has focus
PrivatehandlePrivateHandle 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.
PrivatehandlePrivateHandle key up event
Update the visible character counter and keep track of when the last update happened for each keypress
PrivateisPrivateCheck 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.
true if the current count is over the config.threshold (or no threshold is set)
PrivateupdatePrivateUpdate count message
Helper function to update both the visible and screen reader-specific counters simultaneously (e.g. on init)
PrivateupdatePrivateUpdate count message if textarea value has changed
PrivateupdatePrivateUpdate screen reader count message
PrivateupdatePrivateUpdate visible count message
Staticcheck
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.