Text Field Character Count Down

[besttech]

Anybody ever implement a countdown for the allowed number of characters in Text Area Control? I am looking to do something like this:
Simple-Character-Countdown-Limit-Plugin-Countdown-char.jpg
Thanks

[mikeallenbrown]

No but here was my quick attempt ...

Ashampoo_Snap_Thursday, July 15, 2021_18h59m11s_003_.png
Ashampoo_Snap_Thursday, July 15, 2021_18h59m41s_004_.png

[Garry Flanigan]

You may also want to consider when someone pastes text that is larger than the field.

[besttech]

Thanks Mike, that works awesome!

[Garry Flanigan]

It is a pity that this cannot be done with textarea with an HTML editor as I would love to have a character countdown for this element.
I cannot even figure out what events exist with the HTML editor. There is no onKeyUp or onChange event.
I see that there exists $e.add() that can be used to detect a keyup event and execute a function, but I am not even sure if this is the way forward let alone where to put the code?

[Garry Flanigan]

I have a textarea with HTML editor in a UX and can now count the characters as you type into the editor. It also updates when you paste text!

In the Client-side beforePrepare event I have:

{Dialog.Object}.dialogWatches['MY_CHARCOUNT'] = {
watch: ['FIELDNAME'],
onChange: function() {
var txt1 = {dialog.object}.getValue('FIELDNAME');
{Dialog.Object}.setValue('CHARCOUNT',txt1.length + ' of 200 characters');
}
}

In the code above, the textarea HTML editor field is named FIELDNAME and I have a Static Text control named CHARCOUNT.

This is based on an example in the release notes 'UX Component - Define Custom Watch Events' but there is no mention of it in the official documentation.


Davidk mentioned in this post Watched Controls - Alpha Software Message Board :

"Finally, for some reason, Alpha left in a console message... so that for every row in the List, when the target field gets updated, a console message is pushed out."

I don't profess to know how to go about checking whether the code above creates any issues, but it does work. Any thoughts?