Limiting the content of a TextArea

Being able to limit the length of the content entered into a TextArea can be useful for various reasons. Although not supported natively by HTML, you can achieve the same effect using Javascript - on KeyUp and KeyDown events, check the length of the textarea value and truncate if necessary. We can also display how many characters are remaining if we want to provide user feedback.

Because I've used this technique in several Grails applications, I've created a simple TagLib - you may want to customize it to your requirements.

To use it:

  • include the prototype library with <g:javascript library="prototype"/>

  • use <jttext:changeScript /> once on your page for the utility script

  • define your textarea including the maxlength attribute with <jttext:textArea id="messageField" maxlength="20" />

  • use <jttext:statusDiv for="messageField" /> to display the status message showing how many characters are left


So, a simple GSP would look like:

<html>
<head>
<g:javascript library="prototype"/>
<jttext:changeScript />
</head>

<body>

<jttext:textArea name="messageField" class="sized" style="width:320px;height:60px;" maxlength="20" />
<jttext:statusDiv for="messageField" />

</body>
</html>

Effectively what you get looks like this (the HTML code has been slightly modified to work in this post):


 


Download TagLib here.

Popular posts from this blog

Slow, Buffering, Stuttering Udemy Video

Udemy video has been completely unusable from my home broadband connection. Videos would take minutes to start playing and then continuously stutter and buffer. Searching for a solution I came across this Reddit post - and I found the solution was to change my DNS to use CloudFlare (1.1.1.1). After changing my AppleTV from automatic DNS to manual and using 1.1.1.1 video playback from the Udemy app has been as you would expect. I don't know why this helps, but it seems to have so far.
Read more

Intellij tip - Joining multiple lines into one

There are times when you have some code with each statement on its own line, and you want to move it all onto one line. CSS is where I've needed this the most. You start off with some code like this: And really want this: Intellij has a very simple way to do this by using Ctrl-Shift-J - for more information, see http://www.jetbrains.com/idea/webhelp/joining-lines-and-literals.html
Read more

Looking for IT work in Australia? JobReel.com.au!

I'm currently looking for contract work, and all of the usual places offer vague job descriptions that makes it hard to differentiate one from the other. This makes it hard to decide which ones to apply for, and almost always mean that you end up applying for jobs that are totally inappropriate. Now there is JobReel.com.au - much along the lines of jobs.joelonsoftware.com , positions must display the employer. I'm still looking for a site that lets me specify location, price range, responsibilities and technologies - but JobReel is closer than any of the others, and from what I've seen so far, the job descriptions are more useful and realistic. It looks relatively new to the scene - good luck!
Read more