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

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

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

Memory upgrade for media center

I've noticed that my MythTV ( Mythbuntu 8.10) machine was using 100% of its 1G and swapping. (Incidently, I was running the Blootube widescreen theme, and just switching to the MythCenter theme resulted in a snappier experience). So, I went to buy more memory - and found that 1G cost AUD23 and a 2G stick was AUD45. Nice. I went for the 2G but when a friend commented that mixing a 1G + 2G I'd miss out on dual channel. Bummer, but I'll live with it. When I first installed the RAM, I put the new 2G chip in the same channel (A) as the existing 1G. Booting the PC reported 3G in single channel mode, but it wouldn't boot! It simply reported a CRC error and stopped! I took out the 1G stick, leaving just the 2G and booted okay. Hmmm, so now I put the 1G back, but in one of the channel B slots so the 2 sticks were in different channels. Now, when booting it reported 3G in Flex mode! I'd never heard of this so I looked it up. It all gets explained very well here , and what it...
Read more