Back
  1. Home
  2. How to put a character limit on a textarea?

How to put a character limit on a textarea?

ZEN, Caché

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?

  • + 1
  • 0
  • 359
  • 3
  • 0
Pravin Barton's picture
Post by Pravin Barton 30 October 2017

Comments

Jean Millette's picture
Comment by Jean Millette 30 October 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

+ 2
Pravin Barton's picture
Comment by Pravin Barton 31 October 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.

+ 1
Jean Millette's picture
Comment by Jean Millette 31 October 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!

+ 1