Twitter-style character counter for textareas

In this post I show how to improve textarea usability with a Twitter-style character counter.

Validating form input length is a common strategy for reducing errors. So common in fact that the HTML specification provides a maxlength attribute for input fields. Starting with HTML5, multiline textarea fields support the attribute too!

<textarea id="message" rows=4 maxlength="100" />

Since it is always better to prevent an error than catch one the user already made, here are two ways to improve textarea usability in Magnolia CMS, making sure the user knows how many characters are allowed.

Display the character limit

The obvious improvement is to display the character limit. In Magnolia CMS, you set the limit on the form field. The system saves it to a maxLength property in the repository.

Render the length on the page:

1. Copy the formEdit.ftl script which renders input controls.
2. Create folder Templating Kit > Templates > /form/paragraphs.
3. Create a new template script formEdit and paste the copied script into it.
4. Render the maxLength property in the textarea element on line 21.
5. Render it visibly to the user: ${content.maxLength!'50'}
6. Enable the script and refresh the Contact form page.

Twitter-style character counter

How does the user know they are approaching the limit? jQuery Charcount plugin adds a Twitter-style character counter. As the user types text, the plugin counts unused characters. When a limit is exceeded, the counter turns red.

Start by downloading the jQuery Charcount plugin kit:

• jQuery.js is the core jQuery script. Magnolia CMS already has it.
• charCount.js counts the characters and draws the counter. 
• CSS styles sets the alarm color.
• 01.html is an example page.

Step 1: Add the Charcount script as a resource

1. Go to Templating Kit > Resources > /templating-kit/js/all.
2. Under all, add a new JavaScript resource charCount.
3. In the Advanced tab, set Extension to js.
4. Paste the downloaded charCount.js script into the charCount item.
5. Change line 35 to read the textarea ID from the element:
   var available = $(obj).attr('maxlength') - count;

Step 2: Warn when 10 characters are left

1. Copy the document.ready function from the example 01.html file.
2. Paste it in the charCount script before the closing })(jQuery); line.
3. Change #message2 to textarea. We are getting the IDs dynamically.
4. Set the warning to 10.

The end of your script should now look like this:

  $(document).ready(function(){  

    //custom usage

    $("textarea").charCount({

      warning: 10,

      counterText: 'Characters left: '  

    });

  });  

  

})(jQuery);

Step 3: Make the counter red on warning

1. In /templating-kit/themes/pop/css, create a new sheet charCount.
2. On the Advanced tab, set Extension to css.
3. Set Model Class to info.magnolia.module.templatingkit.resources.STKResourceModel.
4. Paste the following style in the Content box:

.form-wrapper div span.warning {

   color:red;
   font-weight:bold; !important
   }

Step 4: Include the new style in the theme

1. In Templating Kit > Themes > /pop/cssFiles, copy styles to charCount.
2. Set link property to /resources/templating-kit/themes/pop/css/charCount.css.

Step 5: Try it!

Reload the Contact page. Now the page has a counter that starts counting back from the limit.

Type some text into the box. When 10 characters are left, the counter turns red.