Word Counter in Text Box

Ask the community
,
1

How do I put a Word Counter in a Text Box user input element. I have the text box set up and connected to database. I just need a Word Counter in the box so people can see how many words they are typing in the box.

2

Hi,

Welcome to the Wix Code forums.

You can check the word count by using the onKeyPress() event handler:

export function input1_keyPress(event, $w) {
    setTimeout(() => {
        let val = event.target.value;
        if(val.length === 0)
            return;
        let count = WordCount(val);
        $w("#count").text = "" + count;
    }, 10);
}

function WordCount(str) { 
    return str.split(" ").length;
}

WordCount() is a simple function that splits the string up into words and returns the word count. The above example calls this function for each keypress and displays the count in the $w(“#count”) text field.

Eazy Peazy,

Yisrael

3

Thank you! I am new to code… do I copy and paste that code into the editor code area? Does the word counter then appear for the person filling out the form to see? I really appreciate the help!!!

4

You need to connect the keypress handler to the input component:

1340×1012 97.5 KB

When you enter the name of the event handler into the properties panel, a function with that name will be created and displayed in the code panel. You can then copy the code from my input1_keypress() function into the newly created event handler. Also, copy the WordCount() function into the code page as well.

I would highly recommend reading about Wix Code basics in order to familiarize yourself with Wix Code.

Good luck and have fun,

Yisrael

5

Thank you!

6

How would convert that to an input rather than just text so can be part of input to database?

7

How would convert that to an input rather than just text so can be part of input to database?

8

The code works to display on the page but I don’t seem to be able to save the word count to a dataset field.

9

Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

This is an old post and is being closed.