In this article we are going to look at some of the commonest questions in respect of enhancing the TextArea – the Input Control used when the attribute is a longer text string – usually for a description of some sort. It’s generally quite unloved and basic, so here is a moment for it to shine. We will discuss and implement the following ideas:

1. Character Count and Limit : implement a display of the number characters remaining based on a limit : 1200/2000 Characters remaining, that sort of thing.
   
2. Rich Text Editing. Within an input string, it may be required to allow the user to add formatting – bold, italic and so on. How can the TextArea be used to first of all display the relevant options – some sort of toolbar if you like – and then how can the data be saved in a rich text format and recovered back into the control without it looking messy?
   
3. Drag and Drop. How can we allow users of our text area to drag and drop content into it, for example if they want to copy something from another document into the Interview text area?
   
4. Add a placeholder. You know, those messages you see in empty text boxes (like the Hint Text in Intelligent Advisor Interview Input Controls that are single lines) that disappear when you start typing.
   
5. Spell Checking. Well, turns out we’ve already handled Spell Checking in Input Controls in a previous article.

Part One : Character count

The character count is probably one of the most commonly requested items. To implement it, we will leverage the TextArea HTML attribute maxlength – which we will set to our limit. And then we will use the keyup event to check when a user has entered some text, and from then on it’s simple mathematics – how many typed characters and how many left. We can post a message underneath our TextArea to tell the user where they are in the count. We can also increase the width so that it can be wider than the default offered by Intelligent Advisor.

And when we run out of space, the maxlength attribute means the browser will stop us entering any more text. And we tell the user what is going on.

2. Rich Text Editing

Quite a lot of people will have come across tools to enter richer text (meaning, text with formatting) into Web forms. Older versions of WordPress and plugins for other content management tools offered this sort of thing. The most popular is the ever-present TinyMCE. And that is what we will use for our editing platform. It is small, plays nicely with jQuery and is built for TextAreas. So it’s a good choice.

As a nice extra, it has a word counting (and character counting) plugin. We can add logic to stop data entry after say, 2000 characters. TinyMCE is now available as a Cloud Service, so you don’t even have to bother with copying anything into your resources folder. Note that this will not work in standard Debug, so Ctrl+F5 to open it in a real browser.

3. Drag and Drop a file into TextArea textbox

The TinyMCE component above handles drag and drag (and can even check the word / character count of the dragged text to make sure it doesn’t go over) but we’re going to look at a slightly different question. The other day a customer asked me if it was possible to drag and drop text files onto the TextArea, and to receive the text that was in the file, into the text area. The business scenario was that the user of the Intelligent Advisor had a diagnostic text file that needed to be added to the Interview, but not as a file attachment – rather as a text field. So can we do that with our textbox?

Turns out it is not hard to do, the most important thing is to make sure that we capture the drop event and process the file stream. Note that this will not work in standard Debug, so Ctrl+F5 to open it in a real browser.

4. Placeholder

This one turned out to have it’s very own HTML 5 attribute so we just had to add it to the textarea element and it shows up in the browser, even in the Debug, so we can show something like the standard textbox hint text:

All four textbox ideas above are available packaged in one Zip file in the shop, for (almost) free. Have fun. As always the official documentation is online here.