Character Counting in Field Box

Ask the community
,
1

I know a post was already made for this particular question. However, commenting has been turned off and I have no knowledge on coding, let alone Velo.

My goal is to have two Input Field Boxes where customers can provide a script for us. The scripts can be no longer than 700 on one, 1900 on the other. We are wanting to implement a counter so customers are aware when they are reaching the limit.

2

Your TEXT-BOX-INPUT-ELMENT, which takes the input from your user in form of text, has a—> LENGTH <—, which changes with every typed in LETTER into the box.

So, what do you need, to solve your issue?

  1. A Text-Inputbox with a specific ID or your page.
  2. A text placed somewhere on your page (for example under your Tex-Input), which will show us the already used number of allowed letter-count.
  3. You can even generate a second text-element under the first text-element, to be able to show the remaining letters the user still can use, until the counters falls to 0 → 0-remaining letters to be used…sorry…

What else do we need?
Yes! Of course we will need some ----> CODE !!!

Let’s start our coding adventures…

  1. We start when page is ready…
$w.onReady(()=>{..........});
  1. We want to see changes only when the INPUT-BOX changes it’s value…
	$w.onReady(()=>{
		$w('#textInputBoxIDhere').onChange(()=>{
		
		});
	});
  1. What do we want to change? → our two other text-elements right?
    Let’s call them -->text1<-- and -->text2<–
	$w.onReady(()=>{
		$w('#textInputBoxIDhere').onChange(()=>{
				$w('#text1').value = "?????????"
				$w('#text2').value = "?????????"
		});
	});

What do you have to do here???

And what else do you have to know first???

Maybe, you want first to know the length of the already typed in text into your Text-Input-Box???

Let’s get it first —>

$w.onReady(()=>{
	$w('#textInputBoxIDhere').onChange(()=>{
		let currentTextLenght = $w('#textInputBoxIDhere').lenght
		//....or.....
let currentTextLenght = $w('#textInputBoxIDhere').value.lenght
		
			$w('#text1').value = "?????????"
			$w('#text2').value = "?????????"
	});
});

Try out which works which not, i am not sure.

Once you know how long your already typed in text-length is, what to do next?
Maybe come calculations? But what to calculate?

Oh of course → you already know a further variable, called …

txtMaxLengthBox1 = 700;

…and …

txtMaxLengthBox2 = 1900;

What to calculate now?

$w.onReady(()=>{
    let txtMaxLengthBox1 = 700;
    let txtMaxLengthBox2 = 1900;
    
    $w('#textInputBoxIDhere').onChange(()=>{
        let currentTextLenght = $w('#textInputBoxIDhere').lenght
        //....or.....
let currentTextLenght = $w('#textInputBoxIDhere').value.lenght
        
            $w('#text1').value = "?????????"
            $w('#text2').value = "?????????"
    });
});

CONTINUE…:wink:

Code-Ninja

3

Character counting in field boxes refers to the process of tallying the number of letters within a given text input area. This crucial functionality allows users to monitor their text’s length, whether it’s an email, a social media post, or any other content. The tool " 글자수세기 " encapsulates the essence of this feature, which enables individuals to stay within prescribed character limits and optimize their communication. With the ability to effortlessly track character count, individuals can craft concise and impactful messages, ensuring their words convey the intended meaning effectively.