Counter for Characters/Text Remaining

Learn how to create a characters/text remaining counter below text input boxes which updates as the user types in real time, using Corvid (a.k.a. Wix Code).

This example shows you how to create a character/text remaining counter for text boxes which updates as a user types. It is ideal for long text fields with character limitations as it gives users an indication of how much they can still type. Try the example below.

#iptLongText
Try it!
Start typing to activate the text counter
#txtCounter

Add an onKeyPress event listener for #iptLongText. Each time the user types a character in the text box, the #txtCounter element updates with a 200 millisecond delay on the number of characters remaining.

The textRemaining function calculates the characters remaining as the difference between the maximum number of characters the text input field allows (adjust this in the elements settings) and the number of characters typed.

Page Code

Please wait ...
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! All our code snippets come with full support to help you implement them on your own website - simply contact us for help.