A Custom Textarea for Finicky in HTML5

I’m doing more work on bringing Finicky to HTML. Another interface that I wanted to reproduce was a custom input for note fields. It’s basically a hand-drawn top and bottom to user editable notes with a hand writing font. As you fill the notes, the area expands and the bottom moves with the expansion. It’s another cool UI tweak that my designer came up with that I want to honor in this version.

My first pass at it tried to use border images to fill the images as border-top and border-bottom on a textarea. I had one giant problem with that: CSS Border images are very unsupported. I couldn’t get them to work on Chrome, and they don’t appear to be accessible on a lot of browsers yet including the mobile browsers I am targeting.

My next pass was using a textarea. I got a little further along, but textareas are static. They don’t expand to fit the content. In fact, that’s sort of the opposite of their intent. They are supposed to stay static to accommodate large amounts of content. I’m sure I could do something with JavaScript to make that happen, but I hate doing that. No rational reason for that. I just feel that every time I use JavaScript to handle a display/style issue, I die a little on the inside. If I can do it in CSS, so be it.

My next attempt used the new HTML5 attribute “contenteditable.” Contenteditable basically says that the content in a given element is editable by the user. This means that I can just create a div that is user editable. The div has the added benefit of being able to dynamically resize itself when new content comes in. This is exactly what I am looking for.

It works perfectly until I actually go to use it in my mobile app. Surprise, surprise, contenteditable isn’t supported on Android yet.

So it’s back to textarea and JavaScript manipulation. (And a little piece of me dies.) There is a jQuery plugin that will make a text area expand with more content, but it seemed a little heavy since I’m not using jQuery in this application. The basic method is pretty straightforward:

• Create a placeholder for a mirror of the textarea content
• Create a function for onkeyup for the textarea that:
  • Sets the mirror content to be the content of the textarea
  • Grabs the height of the mirror
  • Sets the textarea height to that height

http://snipplr.com/js/embed.js
http://snipplr.com/json/62437

http://snipplr.com/js/embed.js
http://snipplr.com/json/62438

The basic solution is spelled out in this post on the textArea jQuery Plugin.

I went one step further and created a CSS transition that smooths out the height change of the textarea.

http://snipplr.com/js/embed.js
http://snipplr.com/json/62439

That’s a long road to getting it done, but it works. Here’s a working demo of it.