How to put a character limit on a textarea?

Question

Question

Pravin Barton · Oct 30, 2017

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?

Discussion (3)2

Log in or sign up to continue

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 :-)).

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 0

score 1 · Answer 1 · 2017-10-31T10:11:39-04:00

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.

score 1 · Answer 2 · 2017-10-31T10:16:32-04:00

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!