Question
Pravin Barton · Oct 30, 2017

How to put a character limit on a textarea?

I want to limit the length of the value of a textarea in Zen. In HTML the textarea element has a 'maxlength' attribute, but the Zen component doesn't have an equivalent property. Is there any way to add a maximum length in Zen short of creating my own custom component?

#ZEN #Caché
10
2 0 3 505
Log in or sign up to continue

Replies

Jean Millette · Oct 30, 2017

Hi Pravin,

I'm 98% sure that a custom component that uses the %ZEN textarea as a superclass, adds a "maxlength" Property, and overwrites the %DrawHTML() method is the best (only?) way to go. Here's a code smippet that worked (but you likely already have such code :-)).

<codesnippet>

Class ZenApp.Component.TextArea Extends %ZEN.Component.textarea 
{
........

/// Maximum number of characters allowed within the textarea control.
Property maxlength As %ZEN.Datatype.integer(MINVAL = 0);

Method %DrawHTML()
{

.....

&html<<textarea id="#(..%MakeId("control"))#" class="#(..controlClass)#" #(..%Attr("title",..title))# #(..%Name())# #(..%Attr("cols",..cols))# #(..%Attr("maxlength",..maxlength))# #(..%Attr("rows",..rows))# #(disabled)# #(ro)# #(spellcheck)# #(tStyle)# #(..%Attr("tabindex",..tabIndex))# #(..%GetEventHandlers())#>#(tValue)#</textarea>>
}
 

</codesnippet>

 

Hope this helps.

Jean

20
Pravin Barton · Oct 31, 2017

Thanks Jean! That will work for me.

I also found a way of accessing the html element in javascript to set the maximum length:

zen('commentTextArea').findElement('control').setAttribute('maxlength',1000);

But creating the custom component is probably a better practice, since it doesn't break the Zen abstraction.

10
Jean Millette · Oct 31, 2017

You're welcome Pravin! I really like what you found i thought there might be a way to access the HTML element/attribute via javascript but couldn't figure it out. Your sample code will be very helpful to me, especially when debugging ZEN pages using browser developer tools. Thanks!

10