Characters Remaining

This tutorial aims to show you how to make a user input element with a display that shows the number of characters that can still be entered.

Required elements:

1x Text Input, name this "limitedInput"

1x Text Element, name this "remainingCharacters"

The Code

$w.onReady(function () {
$w('#limitedInput').onKeyPress(function() {
setTimeout(characterUpdate, 10);
});
function characterUpdate(){
 var remainingCharacters = $w("#limitedInput").maxLength - $w("#limitedInput").value.length;
    $w("#remainingCharacters").text = "You can still add " + remainingCharacters + " characters";
}
});

Editable features

You can change the timeout for the "remainingCharacters" element to update

by changing the "10" in the below code to something like "100", "500", etc

setTimeout(characterUpdate, 10);

You can change what the text says, by modifying the code, e.g. the below code will produce the output "You have {yourNumber} characters to add."

$w("#remainingCharacters").text = "You have " + remainingCharacters + " characters to add.";