WebTextArea Character Count Display

Targets Web
1

So the more things I do in web apps the more I find I bump up against the client side vs Server side execution limits that require some sort of Javascript work around that I am constantly reminded might break in future versions of Xojo. Regardless, client side is often the way to go, but I find that I am extremely aware of my own limited knowledge of Javascript and am reliant upon the “kindness of strangers” approach to seeking help here on the Forum when Google is not my friend for a solution to a given problem.

When I fail at finding something I can readily adapt to my needs I ask for help so here goes…

I have a need to limit the amount of text a user can input in a text area on a Form running in a Xojo web app without having the calcualtion taking place server side. A search of the Forum gave me m this post with an answer by Michael B that works great to actually limit number of characters in the WebTextArea>

Sub Shown() dim maxlength as integer = 10 me.ExecuteJavaScript("document.getElementById('"+ _ me.ControlID+"_inner').setAttribute('maxLength',"+str(maxlength)+");") End Sub

So that text limit part is solved, however I would like to display the character count as it changes in the WebTextArea in a WebLabel just above it, but only using client side code so it is responsive for the user. This is where I come up empty on the Javascript coding experience. Anybody have anything they can recommend?

Alternatively I an considering putting a timer on the page that updates the count WebLabel every couple seconds, which will likely work better than changing the label every key up event. Your input on an approach would be appreciated.

2

So I wrote the original post before actually trying the Timer approach. It actually seems to work very well firing every 1000ms and updating the counts on 4 WebTextArea controls. So now I’m wondering if it isn’t actually the better way to go or is it less efficient than a javascript approach?

Timer_CharacterCount.Action: Sub Action() Handles Action Label_ReasonCount.Text = Str(Len(TextArea_Reason.Text)) Label_CorrectCount.Text = Str(Len(TextArea_Correct.Text)) Label_InstructionsCount.Text = Str(Len(TextArea_ClerkInstructions.Text)) Label_ShippingInstructionsCount.Text = Str(Len(TextArea_SpecialShippingInstructions.Text)) End Sub

3

Here’s a pure javascript example I found with a couple minutes of googling: https://jsfiddle.net/Kurenaikunai/8zLtdsm8/

4

Thanks Tim, I know my limitations and I just don’t have the javascript chops for how to turn that into a script I can execute so that the count returned is then displayed in another label control. I’ll have to stick with the timer unless someone wants to step in and do a tutorial reply.