Towards a better HTML textarea

Joor Loohuis, February 12, 2010, 8433 views.

With webapplications becoming ever more important, you would think that the one control we have for entering larger amounts of text would be one of the points of attention. Unfortunately, the humble textarea has remained just that for years, humble.

Tags: , , , ,

One of the core elements used in webapplications is the textarea. It is in fact the only element that allows input of text that spans more than just a single line, discarding for the moment the posibility of using the contentEditable property on elements like divs. Textareas are used in applications like forums, guestbooks, wikis, and for numerous other purposes. Given its importance, it is a bit strange that its usability hasn't received much attention over the years. There are some features that could greatly improve the usability and usefulness. What I would like to see implemented are the two following features:

User configurable caret (text cursor) properties

One of the most annoying aspects of using textareas is that the cursor or caret is a very thin line, that often has a very low blink rate. Occasionaly, when I can't find the caret, I resort to actually typing a character, just to find the insert point. What would be really useful is if it where possible to modify the cursor weight, for example by making the line a little thicker. This should be a user preference, and not modifiable through the CSS of a website. And while I'm at it, a way of controlling the blink rate would also help to make the caret a lot easier to find.

Storing and restoring the insert position from JavaScript

One aspect of textareas is that when the form containing a textarea is submitted, or the page is reloaded, the caret position is reset to the start of the text. What would help is if it where easy to access the insert position from JavaScript, both getting and setting. That would make it possible for developers to use this information to create handlers that restore the caret to the insert position when the page is loaded, or perform other small acts of magic. Currently there are various hacks to achieve this, but they do not always work consistently, and they are highly browser dependent. This could in part be abstracted away in JavaScript libraries like Prototype, jQuery and others, which would help older browsers too. But from a usability viewpoint it would help if the JavaScript TextArea object would get a read/write property that contains the offset of the insert position from the start of the text.

To be honest, I don't have a good idea on the feasibility of these features, but it appears to me that these features could be implemented in such a way that they would not affect current applications and user preferences. They would go a long way towards making webapplications easier to work with.

Update (Feb 13, 2010)

After some more searching, I stumbled over an article explaining how to make the caret more visible in Firefox. Setting ui.caretWidth works for Firefox 3.5.7 on Windows XP, but not on the same version of Firefox for Ubuntu 9.10 (Karmic Koala).

Social networking: Tweet this article on Twitter Pass on this article on LinkedIn Bookmark this article on Google Bookmark this article on Yahoo! Bookmark this article on Technorati Bookmark this article on Delicious Share this article on Facebook Digg this article on Digg Submit this article to Reddit Thumb this article up at StumbleUpon Submit this article to Furl


respond to this article