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?
Comments
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
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.
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!