Every Web User Deserves Usable Form Controls – Even in Internet Explorer!

As a Web App Developer – Internet Explorer is the browser we love to hate.  However end users that use Internet Explorer (by choice or by force) shouldn’t have to suffer poor usability when we can do something about it.

The usability item I want to mention today is with regards to <textarea> elements.  Conceptually the textarea field is dead simple, a multiline text field control… but it is the little details that really matter.

The 1st problem is that by default IE renders textarea controls with a disabled vertical scrollbar when it isn’t required. Visually it is just extra noise and consumes valuable space, but it is also potentially misleading as it implies that the field itself might be disabled.

However the 2nd problem is that IE didn’t keep up with the times as browsers advanced.  All other browsers have added a usability tweak enabling the user to stretch the textarea to their desired width/height so they can see more of the content in the textarea or shrink it to see more of the surrounding screen.

I’d love to see the stretchable textarea become a native feature in Project Spartan (the new browser from Microsoft (think IE12)) but even if it never makes it in – we can always apply a little JavaScript magic to bring the stretchable feature to Internet Explorer!

Presenting StretchableTextareas! a jQuery plugin I wrote (MIT license) that adds a simple overlay to mimic the gripper in other browsers (see screen capture below).

ieStretchableTextareas

Go ahead and download/fork the StretchableTextareas jQuery plugin code on Github.