Webtextarea character limit

Getting Started
1

I noticed that Webtextarea has no property to limit on character.

Anybody can share on how to limit maximum character to be typed in Webtextarea?

2

The online docs and some imagination are your friend: http://documentation.xojo.com/ The more you use it, the more you get to know it. And it is really one of the best documentations I have come across so far!

One possibility is to implement the TextChanged Event

and check for the text length. If it’s too long you can cut it or display an error message.

You could do the same in this event:

3

Hi Alex,

Everything you mentioned above is very basic. I know how to use all of them and I know how to implement it using my old programming tool.

It is more helpful to a beginner like me if you can share or refer me some sample codes on how to do it on XOJO.

4

We all were beginners at some point. And this community is very supportive! But please don’t expect perfect solutions where everything is done for you. That will not help you to learn Xojo. Better, examine the examples, read the tutorials, learn the basics (of Xojo and OOP in general), search the documentation (!) and if unclarity remains, ask specific questions. I’m happy to spend some time going through your request.

There is no property to limit the content of a WebTextArea in Xojo itself. Though, there is a “maxlength” property in the HTML5 specifications for the HTML TextArea, however Xojo does not implement it natively. One could mess with JavaScript to set that property in the DOM. I think it is better to create a feature request in the Feedback application if you consider a native implementation useful.

You can still limit the length of a WebTextArea’s content natively in Xojo. This will be server-side, not within the browser. And I’ll go with the new framework as its text handling is more robust. This will make some conversion between data types necessary.

The TextChanged event is called every time the text within a WebTextArea is altered. This can be typing on a keyboard, pasting from the clip board or even if you as a programmer change the text programmatically (important to know). So we’ll go with that event, add it to your WebTextArea.

Let’s assume the following situation: The content of the WebTextArea should be limited to 20 characters. Hence, when a user changes the contents of your WebTextArea, we want to check if it is shorter than (or exactly) 20 characters. If it is longer than 20 characters, we will just cut off the rest and display a warning to the user.

We’ll need the following properties and methods (look at the links!):

  • WebTextArea.Text > This is a String property of the WebTextArea containing the content. Don’t confuse that with the following Text data type (I still consider the new naming very suboptimal).
  • Text > This is a new data type in the new Xojo Framework replacing the String data type.
  • String.toText > To work with the Text data type, we need to convert the String into a Text. The .toText method returns a String as a Text.
  • Text.Length > Method that returns the number of characters in a Text (data type) variable.

Here some first code. Pay attention to the comments in it.

[code]
//We define an empty variable as string (data type)
Dim stringContentOfWebTextArea as String

//We fill our string variable with the contents of our
//WebTextArea by reading the .Text property (!) of the
//WebTextArea. “Me” is a shortcut for our WebTextArea
// we can use since this code is within one of its events.
stringContentOfWebTextArea = Me.Text

//We define an empty variable as text (data type)
Dim textContentOfWebTextArea as Text

//We convert the string to a text (data type)
//using the .toText method
textContentOfWebTextArea = stringContentOfWebTextArea.ToText

//We check if the content exceeds 20 characters
//by calling the .Length method of our Text variable
If textContentOfWebTextArea.Length > 20 Then

//Now a couple of things are happening
//The part right of the equal sign crops the contents
//of the contents to 20 characters using the .Left() method.
//This .Left(X) method returns X characters counting from
//the left variable. Next, the cropped content is then
//assigned to the .Text property (of type String) of our
//WebTextArea with the equal sign.
//(Detailed info: we can assign a Text to a String and
//Xojo will do the conversion automatically for us. For
//the other way around, we need to use the .toText
//method of the String data type. See above.)
Me.Text = textContentOfWebTextArea.Left(20) 

//So now we have a our WebTextArea with only
//20 characters.
//Next, we want to warn the user he just entered
//more than 20 characters and he better shouldn't
//do anymore

Me.MsgBox("You just entered more than 20 characters into a WebTextArea. The text has been cropped to 20 characters.")

//Any WebControl can display a message box to
//the user through its .MsgBox method

End If[/code]

5

Hi Alex,

I believed I read all articles about XOJO, and I watched all video in youtube. But somehow, there are some specific function that was not discussed even in the forum.

As a beginner like me, I cant immediately put away those tricks I used on my original programming language. I usually tried those technique but most of them failed.
Once I experience those failure, I got to forum and ask for help (as my last resource).

Luckily, there are people like you Guys who are willing to share knowledge and share time for us.

Best regard and have a good health Alex.

6

I think You should make a feedback case. There should be a maxLength property in the IDE and maybe at a million by default.

Just to protect user from copy and paste too much there.

I remember that Xojo apps can crash if you paste too much in a text area in a desktop app.

7

You’ll improve quickly, Xojo is a lovely language.

Could you now solve your problem with my explanations above?

8

BTW feature request filed: <https://xojo.com/issue/40939>

9

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

This is a workaround to affect the character limit to the textarea, pending an eventual addition of that property in Xojo. Note that because it taps in the framework directly, it can break if Xojo changes the code.

Alex’s pure Xojo code is considered better form, even if indeed it does not protect from someone pasting a very large amount of text that may overflow the program.

10

im still figuring out how.

even sample javascript above dont work. maybe I missed something

11

Just copy and paste my code into the TextChanged event of your TextArea.

Or copy and paste Michel’s code into the Shown event (without the first and last line).

12

I did both, but nothing works.

Maybe there is other way.

13

[quote=215970:@ronaldo florendo]I did both, but nothing works.

Maybe there is other way.[/quote]

I tested the code before posting.
You cannot simply say “nothing works” with no details whatsoever and ask for another method like that. Please be kind enough to credit people who try to help with a minimum of trust.

Please post your code, or better yet, a sample project. The issue must be on your side.

14

[quote=215970:@ronaldo florendo]I did both, but nothing works.

Maybe there is other way.[/quote]

I am curious to see what you tried. Can you please share your project?

15

I made a video showing Alex solutions.

Youtube

I also made a video based on Michel recomendation.
Youtube

Please guide me, what was wrong on my procedure?

16

If you really need this i’d be reading about creating a WebSDK control (read: WebControlWrapper)

Because the server would process all the textchanged events and the client will keep sending you these events on every character typed. Which brings lot’s more bandwith than you probably want.

It’s better to have the client handle such events. let’s say the client has the “webtextarea js” that has a property for the maxlength from the open/shown event when the user types and reach the limit, it should fire an event for example “CharacterLimitReached”

  • This way the server doesn’t require you to get every text change (typing…) event pushed to it.
17

[quote=216018:@ronaldo florendo]I also made a video based on Michel recomendation.
Youtube [/quote]

Computers are very precise. My example is going into the Shown event of the TextArea. If you place it in Open, the TextArea does not exist yet in the DOM and you get an error.

Try again the way I posted.

18

Hi Michel,

Thanks for noticing that. It works on SHOWN EVENT.

The rest is history for me. Another knowledge obtained from you Guys. Credit to your effort!

Thanks!