How can I add code to count character of user input?

Ask the community
,
1

Hi, I want to add a character count for user input with html code, How can I do it?

2

You don’t need HTML for it.
All you need is —> .length of your input-value.

3

Hi Dina,

How can I do it in a form ? sorry I am new

4

Ok, let’s imagine you have a —> FORM !
In your FORM, you will surely have an → INPUTFIELD.
Into this INPUTFIELD you will surely want to insert a —> VALUE.
And of course you will have a button for —> SUBMIT.

And you want to count the caracters of the entered —> VALUE, right?

$w.onReady(()=>{
	$w('#submitButton').onClick(()=>{
		setTimeout(()=>{
			let myValue = $w('#input1').value
			let charCount = myValue.length 
			console.log("Char-Count: ", charCount)
		},50);
	});
});
5

Hi Dima

thank you for your code, but I wanna show Char-count at real time, not when submision. Please look at photo of my form. I mean, when user enter input as ‘‘ORF sequence(textbox)’’, then Char-count should be seen at the bottom .

1160×958 19.1 KB

6 
export function textBoxshortDescription_keyPress(event) {
    let characterRemaining = $w('#textBoxshortDescription').maxLength - $w('#textBoxshortDescription').value.length;
    
$w('#textCharacterCount').text = `${characterRemaining} Characters Remaining`
}

Note: Set the character limit in Text Box Settings