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 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.
- 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
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.
That’s a long road to getting it done, but it works. Here’s a working demo of it.