Counter starts by 8 letters?

[nickoertel]

Hey,
I found a counter for text inputs from @tony-brunsman .
The counter should count all characters from a richtextBox and display it on a textfield.

But for some reason the counter starts with 8…

Why does it start with 8 ?

Here’s my code:

// Counter Richtext
export function richTextBox1_keyPress(event, $w) {
 let key = event.key;
 let cmdkey = event.metaKey;
 let ctrlkey = event.ctrlKey;
 let nWords = WordCount($w('#richTextBox1').value);

    $w('#text1').text = `${nWords} Zeichen.`;
 if (key === "v" && (ctrlkey === true || cmdkey === true)) {
        $w('#richTextBox1').blur();
        nWords = WordCount($w('#richTextBox1').value);
    }
}
export function richTextBox1_blur(event) {
 let nWords = WordCount($w('#richTextBox1').value);
    $w('#text1').text = `${nWords} Zeichen.`;
}

function WordCount(str) {
 return str.split('').filter(function (n) { return n !== '' }).length;
}

[J.D]

The reason is clear. a value of a rich text input includes the html tags.
You should get rid of them before you count the characters.

[J.D]

Try something like:

export function richTextBox1_keyPress(event) {
 setTimeout(() => {
  const nWords = WordCount($w('#richTextBox1').value.replace( /(<([^>]+)>)/ig, ''));
 $w('#text1').text = `${nWords} Zeichen.`;
 }, 50)
}

[nickoertel]

Yeah that’s it. Thanks for you help, it works

[J.D]

@nickoertel also if the user writes a character that is encoded to a special html entity such as apostrophe, #, &, “greater than” symbol etc… you’ll need identify it and count them as 1 character even though they are longer in html.
before you count, otherwise the number will be greater then it should be.

[nickoertel]

@jonatandor35 Do you have a tutorial, for a counter ?
It’s a much more difficult as I expected.

The counter doesn’t count the 2. character.
So “a” is 1
“aa” is 1
“aaa” is 2

---

I tried to make a counter, when you press ctrl + v:

let key = event.key;
let cmdkey = event.metaKey;
let ctrlkey = event.ctrlKey;

if (key === “v” && (ctrlkey === true || cmdkey === true)) {
$w(‘#richTextBox1’).blur();
nWords = WordCount($w(‘#richTextBox1’).value);
}

---

And I need a new count, if I press Backspace

[J.D]

@nickoertel because you need to set a timeout as I did in the example above.

[yisrael-wix]

@nickoertel You might find it easier to work with the onInput() event handler instead of using keypress with a debounce timeout.

As J.D states, you also should clean the HTML from your string before getting the count.

[nickoertel]

@yisrael-wix @jonatandor35 Thanks, now it counts correctly, exept in 2 cases:

1. if I hit Backspace, there’s no new count

2. if I paste a text, there’s no new counter

I tried the onChange event, but the counter only runs, when I click outside the box.

I tried an similar code on a normal textbox, there the count has no problem with backspace or pasted text.

So here’s the code I’m using:

export function richTextBox1_keyPress(event) {
    setTimeout(() => {
 
 const nWords = RichBoxCount($w('#richTextBox1').value.replace(/(<([^>]+)>)/ig, "").replace(/(&rsquo;)/ig, "'"));
        $w('#CounterRichfield').text = `${nWords} Zeichen.`;
    }, 50)
}

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

[J.D]

@nickoertel I guess you meant it doesn’t trigger when you paste it using mouse clicks (not via ctrl+v).
So I think there’re 2 solutions -

1. If you have a premium account you can create your onw rich-text box using custom element and add oninput event listener (it depends if you know how to use custom elements/or if you want to learn it).

2. You can use Wix rich-text, and use texbox.onFocus() to setInterval() to check (let’s say every 100ms) if the value has changed. and texbox.onBlur() to clearInterval() .

[nickoertel]

@jonatandor35 Yeah, thanks I’ll try your solutions.

Here are some images to understand my problem better:

Every time I press any key, the counter works.

Here I pasted a text using ctrl + v The counter doesn’t get triggered.

Then I deleted some text with “Backspace”. The counter doesn’t get triggered.

So if I want to trigger the Counter I always have to press a key.
ctrl + v and Backspace don’t trigger it.

In other text boxes, the counter get triggered, when I press ctrl + v or Backspace.
The problem is just at the rich text boxes.

[J.D]

@nickoertel basically there’s an onInput event on Corvid but it looks like it doesn’t work for rich-text (it’s probably a bug) . So the 2 solutions I mentioned above are what you have,

[nickoertel]

@jonatandor35 Thanks for your help. Maybe Wix should work on the richtextboxes and make it user easier to work with them.

I have a code, that works now, but I still have one more question.
How can I border the box red ?
.required = true doesn’t work and . borderColor doesn’t work, too.
Maybe with some html ?

Here is my code for the counter:

export function richTextBox1_focus(event) {
    setInterval(function () {
        richTextBox1_keyPress();
    }, 200)
}

export function richTextBox1_blur(event) {
    richTextBox1_keyPress();
}

export function richTextBox1_keyPress(event) {

    setTimeout(() => {
 const nWords = RichBoxCount($w('#richTextBox1').value.replace(/(<([^>]+)>)/ig, "").replace(/(&rsquo;)/ig, "'"));
 let TextCounterRich = $w('#CounterRichfield').text = `${nWords} Zeichen verwendet.`;
 let TextCounterRichMax = $w('#CounterRichfield').text = `Max. Anzahl erreicht.`;

 if (nWords === 2000) {
            $w("#CounterRichfield").html = "<p style='font-size: 18px; font-family: Raleway; font-style: normal; text-align: right; color: #FF4040;'>" + TextCounterRichMax + "</p>";
        } else {
            $w("#CounterRichfield").html = "<p style='font-size: 18px; font-family: Raleway; font-style: normal; text-align: right; color: #37A9DC;'>" + TextCounterRich + "</p>";
        }

    }, 50)
}

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

[J.D]

@yisrael-wix , maybe you’d like to inform the QA team that .onInput() doesn’t work for rich-text input even though it appears in the property panel.

Thanks

[yisrael-wix]

I reported this to QA. Again. (I thought it had been fixed. Silly me.)

[J.D]

Thanks. I think the onCustomValidation() also doesn’t work for a rich-text element.

[mosguinz]

@jonatandor35 Can confirm, just ran into this issue and found this post a year later. The value parameter is always undefined when triggered. As a workaround, using $w.RichTextBox.value to access it works, though.

Also somewhat related: the built-in “required” check appears to fail for the same reason that the OP mentioned. I’m currently doing something similar to @jonatandor35 's solution to strip out the HTML tags and spaces to check if it’s really empty.