Word Count in text box input

Ask the community
,
1

Hopefully someone can help with this wonky issue. I have the code working on a text box input textBox 1 and reporting to a text box text107. But I cannot replicate this code on another page or even to a different location on the same page. Here is the code that works.

export function textBox1_change_1 () {
const remainingLength = $w ( ‘#textBox1’ ). maxLength - $w ( ‘#textBox1’ ). value . length ;
$w ( ‘#text107’ ). text = Only ${ remainingLength } remaining characters. ;
}

2

Note that I assume one must Set Character Limit in the setup options (the gear icon) for the text box.

3

Whats exactly the problem with the REPLICATION?

You have a code which counts → remaining-characters (remaining-length) of a STRING-TEXT.

Everytime the Input-Textbox is changed, the remaining characters also changes.

Here an example, if you would want to show the results in 3 different textfields.

export function textBox1_change_1() {
    const remainingLength=$w('#textBox1').maxLength-$w('#textBox1').value.length;
    $w('#text107').text = `Only ${remainingLength} remaining characters.`;
    $w('#text108').text = `Only ${remainingLength} remaining characters.`;
    $w('#text109').text = `Only ${remainingLength} remaining characters.`;
}

here an example where you have a second INPUT…

export function textBox2_change_1() {
    const remainingLength=$w('#textBox1').maxLength-$w('#textBox1').value.length;
    $w('#text110').text = `Only ${remainingLength} remaining characters.`;
}

Or another version…

$w.onReady(async()=>{

  $w('#textBox1').onChange(()=>{
    const remainingLength=$w('#textBox1').maxLength-$w('#textBox1').value.length;
    $w('#text110').text=`Only ${remainingLength} remaining characters.`;
  });
  
  $w('#textBox2').onChange(()=>{
    const remainingLength=$w('#textBox2').maxLength-$w('#textBox2').value.length;
    $w('#text111').text=`Only ${remainingLength} remaining characters.`;
  });
  
});
4

The issue is putting this code an another page doesnt work; attaching this code to a second or more instance on the page doesnt work; only the first instance works.

5

My suspicion is the KIND of text box input may affect proper function?

6

You have to have the same elements (including their IDs) as the original page, otherwise, it is not going to work.

7

Not sure I understand this. Same ids as original page?

8

@imagineimage
What IDs do have all your used elements on the related page?
You have to edit the IDs with your own.

The best way to solve your issue quickly and without making any mytery, just show your whole page-setup on a screenshot and all related element-IDs.

  1. You have a → text-box? → what is the ID of it?
  2. You have a button? → take a look on the ID of that element

check all your used element-IDs and replace all the ID in the given code-example with your own.

Show also your current working CODE (which works/or not works).

We do not sit in front of your PC → we can not see your CODE and PAGE-SETUP :wink: and you do not give any feedback.

What have you tried already? What exactly do not work? Which error do you get in the CONSOLE ?

9

It appears this fix above has worked. All others failed.

10

Hi there …

The event you need to use is the onInput( ) , onChange( ) only runs once the input field loses focus.

const field = $w('#inputBox');

field.onInput(event => {
    const charsLeft = field.maxLength - event.target.value.length;
    
    if (charsLeft === 0) {
        $w('#chars').text = 'No characters left.'
    } else {        
        $w('#chars').text = `Only ${charsLeft} characters remaining.`
    }    
})

Hope this helps~!
Ahmad

11

Ok, did not pay attention on that :roll_eyes::roll_eyes::roll_eyes:

12

@russian-dima you ask tons of questions at once, I feel like being questioned by an officer :joy: Even I won’t be able to answer them all.

13

@russian-dima little details can save you hours if not days of debugging

14

@ahmadnasriya

I totaly agree!

15

:wink:

16

@ahmadnasriya
Also questions can act like answers :stuck_out_tongue_winking_eye: